Solved

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

Posted on 2013-05-11
8
465 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
  • 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
 

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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

746 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now