Google Maps v3 API and Dynamically creating Maps from ID Tags

Bateman
Bateman used Ask the Experts™
on
Hi, I had an idea but needed some help in the execution. I am currently using the Google Maps API v3 to make some maps. At the moment I am looping through some results in PHP and writing out the markers giving me code as below.

However I thought there would be a better way of doing this. The map is basically plotting some search results, is it possible to add a id to each of the search result titles and use this with JQuery to go through, picking out everything with a ID prefixed with map_ and then use the information in the tag to plot on the map.

For example I would have the following links on the page:

<h3 id="map51.49824_-0.14724"><a href="#">Result 1</a></h3>
<h3 id="map51.51505_-0.19348"><a href="#">Result 2</a></h3>
<h3 id="map51.5397_-0.14254"><a href="#">Result 3</a></h3>

I would then want to place 3 markers on my map at Lat/Lon (51.49824,-0.14724),(51.51505,-0.19348) and (51.5397,-0.14254)

Ideally if someone mouse over the link it would also popup a info window on the map to show which is which...

Tech used is jQuery 1.4, Google Maps v3 and PHP (but I presume any solution would be PHP independent). Also I can name the links/ID's anything I want.

var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.49824,-0.14724),
map: map,
title:"Result 1"
});
                
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.51505,-0.19348),
map: map,
title:"Result 2"
});
                
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.5397,-0.14254),
map: map,
title:"Result 3"
});

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>Google Maps JavaScript API Example</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
            type="text/javascript"></script> 
  </head> 
<body onload="initialize()" onunload="GUnload()"> 

<h3 id="map47.49824_-0.24724"><a href="#">France</a></h3>
<h3 id="map39.51505_-90.19348"><a href="#">USA</a></h3>
<h3 id="map22.5397_-105.14254"><a href="#">Mexico</a></h3>
<h3 id="map55.51505_-110.19348"><a href="#">Canada</a></h3>

<div id="map_canvas" style="width: 500px; height: 300px"></div> 

<script type="text/javascript"> 
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -52.1419), 2);
	var locations = document.body.getElementsByTagName("h3");
	for (var iii=0;iii<locations.length;iii++) { 
	 var id = locations[iii].id;
	  if (id) {
	  var loc1 = id.substring(3).split("_")[0];;
	  var loc2 = id.split("_")[1];;
	  var latlng = new GLatLng(loc1,loc2);
          map.addOverlay(new GMarker(latlng));
	  }
	}
      }
    }
</script> 

</body> 
</html>

Open in new window

Author

Commented:
Cool, starting to get there. That works however a couple of bits. I adapted the code to work with v3 of the API as below:

However

1. It appears the code relys on the links being H3. This might not be the case and needs to recognise the id tag starting wtih map. Would it be better to use a custom tag, I know it isn't web standards but it isn't the end of the world

2. How can I set the default zoom to show all my points on the same map and work out what lon.lat to use
                var myLatlng = new google.maps.LatLng(51.49824,-0.14724);
                var myOptions = {
                zoom: 16,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                
                var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                
                var locations = document.body.getElementsByTagName("h3");
                for (var iii=0;iii<locations.length;iii++) { 
                    var id = locations[iii].id;
                    if (id) {
                        var loc1 = id.substring(3).split("_")[0];;
                        var loc2 = id.split("_")[1];;
                        var latlng = new google.maps.LatLng(loc1,loc2);
                        var marker = new google.maps.Marker({position: latlng, map:map});
                    }
                }

Open in new window

Author

Commented:
Ammend - The code below zooms to the correct zoom level, need to work out how to set the initial lon.lat now

                var bounds = new google.maps.LatLngBounds();
                var myLatlng = new google.maps.LatLng(51.49824,-0.14724);
                var myOptions = {
                zoom: 16,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                
                var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                
                var locations = document.body.getElementsByTagName("h3");
                for (var iii=0;iii<locations.length;iii++) { 
                    var id = locations[iii].id;
                    if (id) {
                        var loc1 = id.substring(3).split("_")[0];;
                        var loc2 = id.split("_")[1];;
                        var latlng = new google.maps.LatLng(loc1,loc2);
                        var marker = new google.maps.Marker({position: latlng, map:map});
                        bounds.extend(latlng); 
                        map.fitBounds(bounds); 
                    }
                }

Open in new window

Author

Commented:
if i removed the below it all worked perfectly! Thanks for the help.

zoom: 16,
center: myLatlng,

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial