Link to home
Start Free TrialLog in
Avatar of UName10
UName10Flag for United Kingdom of Great Britain and Northern Ireland

asked on

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

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.
Avatar of leakim971
leakim971
Flag of Guadeloupe image

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
Avatar of UName10

ASKER

Hi there, it's not an iframe and can't use &amp;..
line 2 of your first code snipet...
Avatar of UName10

ASKER

Oh that's the old one just for reference.  I need to make the 2nd one work if you can help there?
do a right on the page in your web browser and choose view source, locate the script and the URL, post it here, thanks
Avatar of UName10

ASKER

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.
ASKER CERTIFIED SOLUTION
Avatar of UName10
UName10
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of UName10

ASKER

Perfect solution.