apache - XML to Google Map Markers -
i using xampp apache server project. project turn csv xml document using xmlhttprequest loop through xml document, extract attributes(such as: lat, long, , etc...) each location , create map point marker.
below code:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>read xml files google maps</title> <script src="http://maps.google.com/maps? file=api&v=2&key=abqiaaaa7_kd1t_m22hbf9fecadpzxqwcaty4fxmxywkk9lnwgtaqdnktbs1kbsteqrrpg2kwxundmf2jvcikq" type="text/javascript"></script> <script src="markermanager.js"></script> <script> var map; function initialize () { if (gbrowseriscompatible()) { map = new gmap2(document.getelementbyid("map_canvas")); map.setcenter(new glatlng(30.279, -97.700), 13); map.addcontrol(new glargemapcontrol()); map.addcontrol(new gmaptypecontrol()); map.addmaptype(g_physical_map); map.setmaptype(g_physical_map); addmarkersfromxml(); } } function addmarkersfromxml(){ var batch = []; mgr = new markermanager(map); var request = gxmlhttp.create(); request.open('get', 'landmarks.xml', true); request.onreadystatechange = function() { if (request.readystate == 4 && request.status == 200) { var xmldoc = request.responsexml; var xmlrows = xmldoc.documentelement.getelementsbytagname("row"); (var = 0; < xmlrows.length; i++) { var xmlrow = xmlrows[i]; var xmlcelllongitude = xmlrow.getelementsbytagname("longitude")[0]; var xmlcelllatitude = xmlrow.getelementsbytagname("latitude")[0]; var point = new glatlng(parsefloat(xmlcelllatitude.firstchild.data), parsefloat(xmlcelllongitude.firstchild.data)); //get building name var xmlcellbuildingname = xmlrow.getelementsbytagname("building_name")[0]; var celltextbuildingname = xmlcellbuildingname.firstchild.data; //get address var xmlcelladdress = xmlrow.getelementsbytagname("address")[0]; var celltextaddress = xmlcelladdress.firstchild.data; //get ownership var xmlcellownership = xmlrow.getelementsbytagname("ownership")[0]; var celltextownership = xmlcellownership.firstchild.data; //get date built var xmlcelldatebuilt = xmlrow.getelementsbytagname("date_built")[0]; var celltextdatebuilt = xmlcelldatebuilt.firstchild.data; var htmlstring = "building name: " + celltextbuildingname + "<br>" + "address: " + celltextaddress + "<br>" + "ownership: " + celltextownership + "<br>" + "date built: " + celltextdatebuilt; //var htmlstring = 'yes' var marker = createmarker(point,htmlstring); batch.push(marker); } mgr.addmarkers(batch,13); mgr.refresh(); } } request.send(null); } function createmarker(point,html) { var marker = new gmarker(point); gevent.addlistener(marker, "click", function() { marker.openinfowindowhtml(html); }); return marker; } </script> </head> <body onload="initialize()" onunload="gunload()"> <div id="map_canvas" style="width: 1350px; height: 800px"></div> <div id="message"></div> </body> </html> and xml file:
<?xml version="1.0" encoding="utf-8" standalone="yes"?> <root xmlns:xsi="http://www.w3.org/2001/xmlschema-instance"> <row> <longitude>-97.772588</longitude> <latitude>30.249405</latitude> <building_name>goodrich baptist church , cemetery</building_name> <address>2107 goodrich avenue</address> <ownership>non-profit</ownership> <date_built>1860</date_built> </row> <row> <longitude>-97.744671</longitude> <latitude>30.266270</latitude> <building_name>davis (nelson) warehouse</building_name> <address>107 west 4th street</address> <ownership>private</ownership> <date_built>1905</date_built> </row> </root> i have demo setup somehow when try run index file won't show markers on map.it give me error:
uncaught typeerror: cannot read property 'documentelement' of null
could please help. appreciated.
the error have mentioned indicates "xmldoc" variable null , trying access "documentelement" property of null variable. due error javascript code following line won't execute due won't see markers on map.
please make sure able load xml file correctly. should solve problem. let me know if works out.
i'd recommend switch google map v3 google map v2 code have used in example has been deprecated mentioned in following link.
https://developers.google.com/maps/documentation/javascript/v2/
note: google maps javascript api version 2 officially deprecated on may 19, 2010. original deprecation period has been extended may 19, 2013 until november 19, 2013. of date, applications requesting v2 served special, wrapped version of v3 api instead. expect wrapped version of api work simple maps, encourage migrate code version 3 of maps javascript api before date.
Comments
Post a Comment