Creating multiple markers in Google Maps using XML

Question

I'm almost sure this question has been asked before, but for the love of me I just can't find the answer anywhere. Basically what I want to do is create multiple markers on a custom Google Map I'm building. I already have an XML file with the coordinates (lat/lng) and title of each item. I'd like to take the data from the XML file and use it to create markers on the map. I've found how to do this using KML files and MySQL/PHP, but I need to know how to do it in Javascript.

One more thing: I have a .xml file of my own, so it won't be like I'll be getting the data from a webpage because I believe (from research I've done today) that the code for that may be different.

If anyone knows if this has been posted somewhere else before, could you please direct me there? I've literally been searching all day, this is my last resort. Thanks a ton!!!

score 3 · Accepted Answer · edited May 23 '17 at 11:55

If you are looking for a way to parse xml text in JavaScript, then look here: XML parsing of a variable string in JavaScript Info about loading xml file from JavaScript here: Load xml from javascript

Creating markers from custom xml is then quite simple. I added a short example. It shows how to parse xml text or load xml file and then create markers from the data.

Some custom xml text:

var myXmlText = '<?xml version="1.0" encoding="ISO-8859-1"?>' +
      '<coords>' +
         '<item><position lat="50.1" lng="14.5"/><title>Praha</title></item>' +
         '<item><position lat="51.5" lng="0"/><title>London</title></item>' +
         '<item><position lat="48.8" lng="2.4"/><title>Paris</title></item>' +
         '<item><position lat="52.5" lng="13.4"/><title>Berlin</title></item>' +
         '<item><position lat="48.2" lng="16.4"/><title>Wien</title></item>' +
      '</coords>';

Parsing the xml text into xml DOM object:

function parseXml(xmlText) {
   var xmlDoc;
   if (window.DOMParser) {
      parser=new DOMParser();
      xmlDoc=parser.parseFromString(xmlText,"text/xml");
   } else { // Internet Explorer
      xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
      xmlDoc.async="false";
      xmlDoc.loadXML(xmlText); 
   }
   return xmlDoc;
}

Loading and parsing a xml file into xml DOM object:

function loadXml(xmlUrl) {
   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",xmlUrl,false);
   xmlhttp.send();
   xmlDoc=xmlhttp.responseXML;
   return xmlDoc;
}

Create the markers from data in xml DOM object:

function createMarkers(xmlDoc) {
   var items = xmlDoc.getElementsByTagName('item');
   for(var i=0; i<items.length; i++) {
      var positionEl = items[i].getElementsByTagName('position')[0];
      var latlng = new google.maps.LatLng(positionEl.getAttribute('lat'), positionEl.getAttribute('lng'));
      var titleNode = items[i].getElementsByTagName('title')[0].childNodes[0];
      var marker = new google.maps.Marker({
          position: latlng,
          map: map,
          title: titleNode.nodeValue
      });
    }
}

To create the markers from xml file, all you need to do is:

var xmlDoc = loadXml("my_items.xml");
createMarkers(xmlDoc);

To create the markers from the xml text, use:

var xmlDoc = parseXml(myXmlText);
createMarkers(xmlDoc);

I have one question. When you're creating the titleNode, why do you do ".childNodes[0]"? How come you didn't do that when it came to lat/lng? — Jessica Stanley, Nov 30 '11 at 17:21
It's because of the format of the xml data I used. Title is in the element's content. But lat and lng are in the element's attributes. — Tomik, Nov 30 '11 at 18:08
Just a small mistake - in loadXml(), change this: xmlhttp.open("GET",xmlUrl,false); to this: xmlhttp.open("GET",xmlText,false); — Adil B, Dec 01 '11 at 05:50
I was wondering why I was having issues with that :) thanks guys! — Jessica Stanley, Dec 01 '11 at 05:52

score 0 · Answer 2 · edited Aug 02 '14 at 16:39

0

To solve the problem I added the following code to the createMarkers function:

var myOptions = {
    zoom: 6 ,
    center: latlng ,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);

edited Aug 02 '14 at 16:39

honk

9,137
11
75
83

answered Aug 02 '14 at 16:01

RAJIV

1

Creating multiple markers in Google Maps using XML

2 Answers2