| <!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> |
| <script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAhRoXexB6DsOeOsg5zak8bxT4bqueZzmlWMPpMo4vH427YXUnbxQKNUwVYFh5uBKFCtJrgAwZq3U0sQ" type="text/javascript"></script> |
| </head> |
| <body> |
| <div id="map" style="width: 800px; height: 500px"></div> |
| <script type="text/javascript"> |
| //<![CDATA[ |
| |
| // Center the map on Palo Alto |
| var map = new GMap(document.getElementById("map")); |
| map.addControl(new GLargeMapControl()); |
| map.addControl(new GMapTypeControl()); |
| map.centerAndZoom(new GPoint(-96.0, 42.0), 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> |
| var request = GXmlHttp.create(); |
| request.open("GET", "data.xml", true); |
| request.onreadystatechange = function() { |
| if (request.readyState == 4) { |
| var xmlDoc = request.responseXML; |
| var markers = xmlDoc.documentElement.getElementsByTagName("marker"); |
| for (var i=0; i<markers.length; i++) { |
| var point = new GPoint(parseFloat(markers[i].getAttribute("lng")), |
| parseFloat(markers[i].getAttribute("lat"))); |
| var marker = new GMarker(point); |
| map.addOverlay(marker); |
| } |
| } |
| } |
| request.send(null); |
| |
| //]]> |
| </script> |
| </body> |
| </html> |
