html + google.maps.InfoWindow() + external source xml document (XMLHttpRequest)

Question

I have a HTML page which hosts a google maps info control. I am able to display a marker giving static values hard-coded in the html document. Now i am trying to get the values from a XML external source document. This is what I want to do,

function initialize(Object) {

var mapOptions = {
center: new google.maps.LatLng(19.314059,84.801407),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
marker:true
};

var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","cd_catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 
var x=xmlDoc.getElementsByTagName("CD");

for (i = 0; i < x.length; i++) {
var LatLat = x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue;
var LongLong = x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue;
var Title = x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
var myLatlng = new google.maps.LatLng(LatLat, LongLong);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: Title
});

}
}

The xml document,

<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy® -->
<CATALOG>
    <CD>
        <TITLE>Ambupa Bauri Street</TITLE>
        <ARTIST>56</ARTIST>
        <COUNTRY>19.3173287566233</COUNTRY>
        <COMPANY>84.8497137612449</COMPANY>
    </CD>
    <CD>
        <TITLE>Anadrigam</TITLE>
        <ARTIST>64</ARTIST>
        <COUNTRY>19.3128836507433</COUNTRY>
        <COMPANY>84.7996238277367</COMPANY>
    </CD>
</CATALOG>

My tag is as below,

<body onload="if (onLoad) onLoad(); initialize()">

This is not working, any help will be appreciated.

remove "if (onLoad)" from body onload function. i think it might be issue with that — Bhavesh Parekh, Dec 27 '13 at 11:40
Thanks for your reply, I did add the onload function call on a button click event. Still unable to get the marker on the google maps. — Anirudh Kulkarni, Dec 27 '13 at 13:05

score 0 · Answer 1 · edited May 23 '17 at 10:25

First of all code will not work well because there are some bugs in it. like you have not mentioned event listener for markers for info window like that.

google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
  infowindow.setContent(locations[i][0]);
  infowindow.open(map, marker);
}
})(marker, i));

You can find reference from

Google Maps API v3: auto-center map with multiple markers

Or

http://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/

Please look into this FIDDLE http://jsfiddle.net/x5R63/

**EDIT FOR FURTHER ANSWER **

//GET NODE LENGTH
function getNodeLength(nodeName, xmlNode){
    return xmlNode.getElementsByTagName(nodeName).length;
}

//GET NODE VALUE
function getNodeValue(nodeName, xmlNode, i){
    return xmlNode.getElementsByTagName(nodeName)[i].firstChild.nodeValue;
}

function getExtendedNodeValue(nodeName, xmlNode, i)
{
    var node = "";

    if(typeof(xmlNode.getElementsByTagName(nodeName)[i]) != "undefined" && xmlNode.getElementsByTagName(nodeName)[i].hasChildNodes())
    node = xmlNode.getElementsByTagName(nodeName)[i].firstChild.nodeValue;

    return node; 
 }


 function getAttributeValue(i, nodename, data){
    return data[i].getAttribute(nodename);
 }

Now based on your situation you can use above code like below:

var len = getNodeLength(xmlDoc,"CD");

for(i=0;i<len;i++)
{
   var latLat = getExtendedNodeValue("COUNTRY",xmlDoc,i);    
}

Thanks again, I kinda understand the issue, I am able to get the marker on the map when i directly substitute values to var LatLat = "19.333" var LongLong = "35.333" var Title = "Orissa", but i think i am unable to get the info stored in the xml document. Can you please help me and show me how can i open the xml and read the info and put that into a for look and display it on google maps? Thanks again. — Anirudh Kulkarni, Dec 27 '13 at 13:29

html + google.maps.InfoWindow() + external source xml document (XMLHttpRequest)

1 Answers1