?
Solved

Need to set Google Maps APIv3 dynamically by postcode from the database

Posted on 2013-05-11
8
Medium Priority
?
491 Views
Last Modified: 2013-05-17
I'm trying to install the new Google APIv3 Map for our event pages here (2nd one in the middle of the page).

The current map is the old embedded one and I need to use a postcode parameter like the one currently:

 
    <div class="event-map">
        <iframe src="http://maps.google.co.uk/maps?q=<%=server.URLEncode(""&rs("ca_postcode"))%>&amp;ie=UTF8&amp;hq=&amp;hnear=<%=Session("PublicFranchiseName")%>+<%=server.URLEncode(""&rs("ca_postcode"))%>,+United+Kingdom&amp;z=14&amp;iwloc=near&amp;output=embed"></iframe>
    </div>
<% end if %>

Open in new window


Here's the code I've tried from Google's instructions using the asp generated postcodes from the database
<%=server.URLEncode(""&rs("ca_postcode"))%>

Open in new window

, but it doesn't register the postcodes:

<div id='map-canvas'></div>
 <script src="http://maps.googleapis.com/maps/api/js?q=<%=server.URLEncode(""&rs("ca_postcode"))%>&hnear=<%=Session("PublicFranchiseName")%>+<%=server.URLEncode(""&rs("ca_postcode"))%>,+United+Kingdom&key=xxxxxxxxxxxx&sensor=false"></script>
<script>
var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var geolocate = function(address, callback) {
        $.ajax({
                url: "http://maps.googleapis.com/maps/api/geocode/json",
                data: {
                    "sensor": true,
                    "address": address
                },
                dataType: "json",
                success: function(d) {
                    if (d.status == "ZERO_RESULTS") callback(false);
                    if (d.results && d.results[0] && d.results[0].geometry) {
                        callback({
                            "ne": d.results[0].geometry.bounds.northeast,
                            "sw": d.results[0].geometry.bounds.southwest,
                            "center": d.results[0].geometry.location
                        });
                    }
                    else callback(false);
                }
            });
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
  geolocate("<%=server.URLEncode(""&rs("ca_postcode"))%>&hnear=<%=Session("PublicFranchiseName")%>+<%=server.URLEncode(""&rs("ca_postcode"))%>,+United+Kingdom", function(c) {
        map.setCenter(new google.maps.LatLng(c.center.lat, c.center.lng));
 });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Open in new window


Any help would be much appreciated.
0
Comment
Question by:UName10
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
8 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39158809
replace &amp; by &
if it don't work, do a right on the page in your web browser and choose view source, locate the iframe and the URL, post it here, thanks
0
 

Author Comment

by:UName10
ID: 39158862
Hi there, it's not an iframe and can't use &amp;..
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39158864
line 2 of your first code snipet...
0
Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

 

Author Comment

by:UName10
ID: 39158880
Oh that's the old one just for reference.  I need to make the 2nd one work if you can help there?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39158894
do a right on the page in your web browser and choose view source, locate the script and the URL, post it here, thanks
0
 

Author Comment

by:UName10
ID: 39159697
Hi there sorry for the delay..

Here's the source for that section:

    <div id='map-canvas'></div>
     <script src="http://maps.googleapis.com/maps/api/js?q=CM14+5AY&hnear=Brentwood+CM14+5AY,+United+Kingdom&key=AIzaSyBaPEDyFbbnWjtvT8W3UBOM34Y7g6vK69A&sensor=false"></script>
    <script>
    var map;
    function initialize() {
      var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
	  var geolocate = function(address, callback) {
			$.ajax({
					url: "http://maps.googleapis.com/maps/api/geocode/json",
					data: {
						"sensor": true,
						"address": address
					},
					dataType: "json",
					success: function(d) {
						if (d.status == "ZERO_RESULTS") callback(false);
						if (d.results && d.results[0] && d.results[0].geometry) {
							callback({
								"ne": d.results[0].geometry.bounds.northeast,
								"sw": d.results[0].geometry.bounds.southwest,
								"center": d.results[0].geometry.location
							});
						}
						else callback(false);
					}
				});
	  };
      map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);
 	  geolocate("CM14+5AY", function(c) {
			map.setCenter(new google.maps.LatLng(c.center.lat, c.center.lng));
	 });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>

Open in new window


It's picking up the postcode which is good...it's just the javascript which isn't working.
0
 

Accepted Solution

by:
UName10 earned 0 total points
ID: 39159794
Hi there, it was the zoom! All fixed now, thanks for the help.
0
 

Author Closing Comment

by:UName10
ID: 39174152
Perfect solution.
0

Featured Post

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Ready to get certified? Check out some courses that help you prepare for third-party exams.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month7 days, 21 hours left to enroll

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question