Question

I have a PHP script that generates a list of places and I need to add those to a Google map on the same page. In spite of the MANY tutorials online, I haven’t been able to find a straightforward way of doing this. I’m curious to know if there’s a simple javascript/php snippet to do this… without resorting to a JQuery plugin, etc.

<ul id="myPlaces">
<li name="Pan Africa Market" address="1521 1st Ave, Seattle, WA" lat="47.608940" lng="-122.340141" type="restaurant">Pan Africa Market</li>
<li name="Buddha Thai & Bar" address="2222 2nd Ave, Seattle, WA" lat="47.613590" lng="-122.344391" type="bar"/>Buddha Bar</li>
<li name="The Melting Pot" address="14 Mercer St, Seattle, WA" lat="47.624561" lng="-122.356445" type="restaurant"/>Melting Pot</li>
</ul>

The Google Map would simply contain markers with these locations on it. Naturally the locations would change, so they can’t be hard-coded.

Answer 1

Plain jQuery can do this for you with the each function. For the code example you need a google maps object:

$('#myPlaces li').each(function(index, el) {

    new google.maps.Marker({
        position: new google.maps.LatLng($(el).attr("lat"), $(el).attr("lng")),
        map: map,
        title: $(el).attr("name")
    });

});

See the doku for more informations:

• http://api.jquery.com/each
• http://code.google.com/intl/en-EN/apis/maps/documentation/javascript/reference.html#Marker

In plain JS it is more code to write and it can be done with the getElementsByTagName function which you can call on the document or a child node:

var i, list, places, place, lat, lng, placeName;

list = document.getElementById("myPlaces");
places = list.getElementsByTagName("li");

for (i = 0; i < places.length; i += 1) {
    place = places[i];
    lat = place.getAttribute("lat");
    lng = place.getAttribute("lng");
    placeName = place.getAttribute("name");

    new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map: map,
        title: placeName
    });
}