Been going round in circles with this My script should load a google map with no markers. The user then clicks a button which loads the markers onto the map from an external xml file. Any ideas how to do this? I have tried loads but it doesn't seem to like it. The reason I want to do this is so I can load new markers to the map from an sql database without reloading the map. If you have any other ideas please suggest. <!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"> <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&v=2&key=mykey" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(37.4419, -122.1419), 13); // Download the data in data.xml and load it on the map. The format we // expect is: // <markers> // <marker lat="37.441" lng="-122.141"/> // <marker lat="37.322" lng="-121.213"/> // </markers> GDownloadUrl("data.xml", function(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); map.addOverlay(new GMarker(point)); } }); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 500px; height: 300px"></div> <BR> <input type="button" onclick="setmarkers()" value="Set markers"> </body> </html> Code (markup):
First, you need to define the setmarkers function you're trying to call with the button. The code to pull and render the markers should be in that function. You also need to move the declaration of the map variable out of the onload function so the other function can use it. This seems to work with a data.xml file saved in the same directory as the html. <!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"> <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&v=2&key=mykey" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var map; function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(37.4419, -122.1419), 13); // Download the data in data.xml and load it on the map. The format we // expect is: // <markers> // <marker lat="37.441" lng="-122.141"/> // <marker lat="37.322" lng="-121.213"/> // </markers> } } function setmarkers(){ GDownloadUrl("data.xml", function(data, responseCode) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); map.addOverlay(new GMarker(point)); } }); } //]]> </script> </head> <body onload="load()" > <div id="map" style="width: 500px; height: 300px"></div> <BR> <input type="button" onclick="setmarkers()" value="Set markers"> </body> </html> Code (markup):
Can I see the end result somewhere? Played around with maps myself a bit, would be interested to see.
I'm working with this now, I am trying to parse an already made KML file, it should be simple xml parsing, however it is giving me some difficulties, I'll post resolution when I find one, I'm determined!!