Populate GoogleMap with XML - google-maps-api-3

Question

I created a custom XML structure for my Map Points. The structure looks like the code below. I'm wanting to read the points in and put them on the map accordingly with a popup window when clicked and a specific marker icon. I would appreciate any help.
MapPoints.xml
<MapPoints>
<MapPoint PointID="1">
<LocationName></LocationName>
<LocationAddress></LocationAddress>
<LocationURL></LocationURL>
<LocationExt></LocationExt>
<LocationFax></LocationFax>
<LocationLat></LocationLat>
<LocationLong></LocationLong>
<LocationMarker></LocationMarker>
</MapPoint>
<MapPoint PointID="2">
<LocationName></LocationName>
<LocationAddress></LocationAddress>
<LocationURL></LocationURL>
<LocationExt></LocationExt>
<LocationFax></LocationFax>
<LocationLat></LocationLat>
<LocationLong></LocationLong>
<LocationMarker></LocationMarker>
</MapPoint>
<MapPoint PointID="3">
<LocationName></LocationName>
<LocationAddress></LocationAddress>
<LocationURL></LocationURL>
<LocationExt></LocationExt>
<LocationFax></LocationFax>
<LocationLat></LocationLat>
<LocationLong></LocationLong>
<LocationMarker></LocationMarker>
</MapPoint>
<MapPoint PointID="4">
<LocationName></LocationName>
<LocationAddress></LocationAddress>
<LocationURL></LocationURL>
<LocationExt></LocationExt>
<LocationFax></LocationFax>
<LocationLat></LocationLat>
<LocationLong></LocationLong>
<LocationMarker></LocationMarker>
</MapPoint>
</MapPoints>

Answer 1

There are lots of examples that parse xml in the "Mike Williams Google Maps API v2 tutorial" format using attributes, here is one.
To use your "custom" format, you will need to replace this line (to look for "MapPoint" rather than "marker"):
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
and these lines:
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
var html = markers[i].getAttribute("html");
var label = markers[i].getAttribute("label");
// create the marker
var marker = createMarker(point,label,html);
With code that parses the element content out of your xml.
To get the element content you will need to do something like:
var lat = parseFloat(nodeValue(markers[i].getElementsByTagName("LocationLat")[0]));
Where nodeValue (borrowed from geoxml3) is:
//nodeValue: Extract the text value of a DOM node, with leading and trailing whitespace trimmed
geoXML3.nodeValue = function(node) {
var retStr="";
if (!node) {
return '';
}
if(node.nodeType==3||node.nodeType==4||node.nodeType==2){
retStr+=node.nodeValue;
}else if(node.nodeType==1||node.nodeType==9||node.nodeType==11){
for(var i=0;i<node.childNodes.length;++i){
retStr+=arguments.callee(node.childNodes[i]);
}
}
return retStr;
};

Answer 2

Use jquery. In the head of your html doc, put this line:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
Now use a jQuery ajax call to the local XML file.
//pulls in the xml
$.ajax({
type: "GET",
url: "MapPoints.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('MapPoint').each(function(){
var lat = $.trim(this.LocationLat);
var lng = $.trim(this.LocationLng);
//use the same method to extract your other data
var mappoint = new google.maps.LatLng(lng,lat);
//now create the marker and set it to your map
var marker = new google.maps.Marker({
position:mappoint,
map:map,
title:'Your Marker Title',
icon:null
});
});
}
});