?
Solved

Plotting multiple points on Google Maps from XML

Posted on 2012-12-22
1
Medium Priority
?
790 Views
Last Modified: 2012-12-23
Seasons Greetings Experts,

Lets say I have an xml feed showing Longitude and Latitude points that I'd like to plot into a Google Map embedded in an ASP .Net page.

An example feed appears below:

http://www.foolsbasket.com/Tracer_SearchResponse.aspx?UDID=6f6267cdbafcaae89132f30b39f4fbe4ae5bbf8a&GAMECODE=BPBFIN1

I have been fiddling about with online tutorials but have had no joy in getting anything to work. Could you get me started with a barebones page/code behind to get the points added to the map and labelled with the PING_COUNT field.

Thanks in advance!

Split_Pin
0
Comment
Question by:Split_Pin
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 1

Accepted Solution

by:
DanUrsoviciu earned 2000 total points
ID: 38715191
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>';

Open in new window

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;
}

Open in new window

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;
}

Open in new window

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
      });
    }
}

Open in new window

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

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

Open in new window


To create the markers from the xml text, use:

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

Open in new window

0

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question