Solved

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

Posted on 2013-05-11
8
482 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
Quiz: What Do These Organizations Have In Common?

Hint: Their teams ended up taking quizzes, too.

 

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

729 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