asked on

Google Maps v3 API and Dynamically creating Maps from ID Tags

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

ASKER CERTIFIED SOLUTION

hankknight

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Bateman

ASKER

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

Bateman

ASKER

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

Bateman

ASKER

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

zoom: 16,
center: myLatlng,