Solved

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

Posted on 2013-05-11
8
472 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

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

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

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

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…

856 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