Google Map API – Markers with Pop Up Windows

Another need I had was to have map markers pulling data from an xml file that also had “pop up” windows functionality with information about that specific marker. As a result I put together the following bit of script.  The lat/lng and information about each marker point are loaded from an xml file named popupdata.xml and then added to the map.  When a marker point is clicked on, it pulls the html I have specified in the map javascript as well as the variables I have identified and populated in the xml file. While this example is quite simple(with only date and address and simple html), there are very interesting possibilities since you can have complex html and include pictures and  if you desire. If you are going to use this example for yourself, just add your Google Maps API key and enter the addresses and variables you want to add. You will need to add the variable names to both the javascript and the xml file. Since this will all be easier to understand with an example, I have included one.

You can visit a LIVE SAMPLE or download the full html page and associated data.xml file from HERE.
[ad#leader]

Comments

  1. exactly what I was looking for…thanks!

  2. Glad it worked for you. You are welcome.

  3. I had been pulling my hair out until I found your post. Nothing is better to understand than a working example script. Thank you very much!

  4. how to add marker to map taking coordinates from database (sql server 2005)

  5. Thanks for your post. Do you know how I can make the markers custom images?

  6. Jason, thanks for the interesting post. But I am unable to see the code sample for this or the prev (adding address markers and gecoding).

    Can you please pass on the same, or post it here.

    Thanks,
    Smitha

  7. Just clarifying.. I did a view source on the HTML and could see the scripts, but if I could see the original scripts before being rendered by the browser that would be great. Thanks.

Speak Your Mind

*