Geek Answers Handbook

Migrating my HTML API MAP API version 2 to version 3

I would really appreciate help on this.

My html v2 file with some temporary key works fine. I get places from some XML, create different color markers, and add some URLs also from the XML attributes in the Info Window (not too complicated). Now I need to port this to v3. I found some equivalents for functions from v2, but I did not find for GDownloadUrl (for loading XML), as well as GIcon (G_DEFAULT_ICON); Can someone please take a look at both of my codes and tell me how to change so that this works in v3 too. I have changed most of the things, so if someone can see the error, I will be grateful. Thanks in advance.

Version 2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Google Maps</title> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=AIzaSyA4UDNP6MZ" type="text/javascript"></script> </head> <body onunload="GUenter code herenload()"> <!-- you can use tables or divs for the overall layout --> <table border=1> <tr> <td> <div id="map" style="width: 1250px; height: 1250px"></div> </td> </tr> </table> <script type="text/javascript"> //<![CDATA[ if (GBrowserIsCompatible()) { var gmarkers = []; // A function to create the marker and set up the event window function createMarker(point,name,alarm,markerOptions) { var marker = new GMarker(point,markerOptions); GEvent.addListener(marker, "click", function() { var alarmanchor1='<span class="url"><a href="' + alarm; var alarmanchor2='" title="www" target="_blank">Event List</a></span>'; var alarmanchor=alarmanchor1+alarmanchor2; marker.openInfoWindowHtml(alarmanchor); }); return marker; } // This function picks up the click and opens the corresponding info window function myclick(i) { GEvent.trigger(gmarkers[i], "click"); } // create the map var map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng( 41.932797,21.483765), 10); // Read the data from alarms33.xml GDownloadUrl("alarms33.xml", function(doc) { var xmlDoc = GXml.parse(doc); var markers = xmlDoc.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { // obtain the attribues of each marker var lat = parseFloat(markers[i].getAttribute("lat")); var lng = parseFloat(markers[i].getAttribute("lng")); var point = new GLatLng(lat,lng); var alarm = markers[i].getAttribute("alarm"); var label = markers[i].getAttribute("label"); var severity = parseFloat(markers[i].getAttribute("severity")); var severityIcon = new GIcon(G_DEFAULT_ICON); var color; if (severity == 0) color = "66FF33"; else if (severity == 1) color = "990099"; else if (severity == 2) color = "00CCFF"; else if (severity == 3) color = "FFFF00"; else if (severity == 4) color = "FFCC00"; else if (severity == 5) color = "FF3300"; else color = "yellow"; severityIcon.image = "http://www.googlemapsmarkers.com/v1/" + color; severityIcon.iconSize = new GSize(15, 30); markerOptions = { icon:severityIcon }; // create the marker var marker = createMarker(point,label,alarm,markerOptions); map.addOverlay(marker); } }); } else { alert("Sorry, the Google Maps API is not compatible with this browser"); } //]]> </script> </body> </html>

Version 3:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Google Maps</title> <script src="http://maps.google.com/maps?file=api&amp;v=3&amp;sensor=false&amp;key=AIzaSyDsa1LyWOQ" type="text/javascript"></script> </head> <body onunload="initialize()"> <!-- you can use tables or divs for the overall layout --> <table border=1> <tr> <td> <div id="map" style="width: 1250px; height: 1250px"></div> </td> </tr> </table> <script type="text/javascript"> //<![CDATA[ var gmarkers = []; // A function to create the marker and set up the event window function createMarker(point,name,alarm,markerOptions) { var marker = new google.maps.Marker(point,markerOptions); google.maps.event.addListener(marker, "click", function() { var alarmanchor1='<span class="url"><a href="' + alarm; var alarmanchor2='" title="www.skolaznanja.com" target="_blank">Event List</a></span>'; var alarmanchor=alarmanchor1+alarmanchor2; var infoWindow=new google.maps.InfoWindow(); infoWindow.setContent(alarmanchor); infowindow.open(map,marker); }); return marker; } // This function picks up the click and opens the corresponding info window function myclick(i) { google.maps.event.trigger(gmarkers[i], "click"); } // create the map function initialize() { var mapDiv = document.getElementById("map"); var map; var myLatlng = new google.maps.LatLng(41.932797,21.483765); var myOptions = { zoom:10, center:myLatlng, mapTypeId:google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(mapDiv, myOptions); } //var map = new google.maps.Map(document.getElementById("map")); //map.addControl(new GLargeMapControl()); //map.addControl(new GMapTypeControl()); //map.setCenter(new google.maps.LatLng( 41.932797,21.483765), 10); // Read the data from example.xml GDownloadUrl("alarms44.xml", function(doc) { var xmlDoc = GXml.parse(doc); var markers = xmlDoc.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { // obtain the attribues of each marker var lat = parseFloat(markers[i].getAttribute("lat")); var lng = parseFloat(markers[i].getAttribute("lng")); var point = new google.maps.LatLng(lat,lng); var alarm = markers[i].getAttribute("alarm"); var label = markers[i].getAttribute("label"); var severity = parseFloat(markers[i].getAttribute("severity")); var severityIcon = new GIcon(G_DEFAULT_ICON); var color; if (severity == 0) color = "66FF33"; else if (severity == 1) color = "990099"; else if (severity == 2) color = "00CCFF"; else if (severity == 3) color = "FFFF00"; else if (severity == 4) color = "FFCC00"; else if (severity == 5) color = "FF3300"; else color = "yellow"; severityIcon.image = "http://www.googlemapsmarkers.com/v1/" + color; severityIcon.iconSize = new GSize(15, 30); markerOptions = { icon:severityIcon }; // create the marker var marker = createMarker(point,label,alarm,markerOptions); map.setMap(marker); } }); //]]> </script> </body> </html>
+7
source share
1 answer

As you noted, GDownloadUrl () no longer exists in GMap V3. I would recommend jQuery.get (url)

I sent an example How to parse an XML file for marker locations and display on a map .

UPDATE: As @ user1191860 points out, there is a utility for GMap V3 xmlparsing . I did not know about it. AFAIK, there is no reason not to use it. You need to add

 <script src="http://gmaps-samples-v3.googlecode.com/svn-history/r28/trunk/xmlparsing/util.js"></script>

to the html page. Interestingly, the author also includes a jQuery example.

+5
source

More articles:


All Articles