Question

I have a map that reads an XML file; it’s all very simple and copied from here:
http://geochalkboard.wordpress.com/2009/03/30/reading-xml-files-with-the-google-maps-api/

My version is here:
http://www.cloudfund.me/maps/mashup.html and the data file it’s reading is here:
converted.xml in the same directory.

I don’t get any points at all, when I run it. I put some console logging in to see if I could see anything, but as far as that’s concerned, it just runs through without a hitch. The file loads ok, and I can watch the code loop through all the rows (208 in this example) without any problems.

The only warning I’m getting is the ‘Resource interpreted as other passed as undefined’ one; having had a look at some of the other threads, I can’t see anything that helps – no empty src links, etc. As far as I can tell, this shouldn’t stop it marking the points, either.

Here’s the real kicker – in trying to trace this error, I set up an exact replica of the original code on my own server, and got an error about null fields, which I added some conditional code to to sort; this version works on my server. This is austin.html in the same directory (sorry, can’t do more than two links in my first posts!)

So – my code is this:

<title>Test </title>


<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=AIzaSyDgybFoyn3i5j_6d7ul7p2dPNQ5b1xOWnk"
        type="text/javascript">console.log("Loaded Maps API");</script>

            <script src="http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/src/markermanager.js">console.log("MarkerManager");</script>


<script type="text/javascript">
console.log("Into Main Script");
function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(51.39906378, -2.449545605), 13);
    map.setUIToDefault();
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.addMapType(G_PHYSICAL_MAP);
    map.setMapType(G_PHYSICAL_MAP);
    console.log("Reached end of map initialising");
    addMarkersFromXML();
    console.log("MarkersfromXML")
  }
}

function addMarkersFromXML(){
   var batch = [];
   mgr = new MarkerManager(map); 

   var request = GXmlHttp.create();
   console.log("About to open converted.xml")
   request.open('GET', 'converted.xml', true);
   console.log("Opened Converted.xml")
   request.onreadystatechange = function() {
  if (request.readyState == 4 && request.status == 200) 
{
    var xmlDoc = request.responseXML;
    var xmlrows = xmlDoc.documentElement.getElementsByTagName("row");

    for (var i = 0; i < xmlrows.length; i++) {
        var xmlrow = xmlrows[i];
        console.log("Running through row number",i)
        var xmlcellLongitude = xmlrow.getElementsByTagName("longitude")[0];
        console.log(xmlcellLongitude);
        var xmlcellLatitude = xmlrow.getElementsByTagName("latitude")[0];
        var point = new GLatLng(parseFloat(xmlcellLatitude.firstChild.data),parseFloat(xmlcellLongitude.firstChild.data));

        //get the PAO
        var xmlcellAssetName = xmlrow.getElementsByTagName("pao")[0];
        console.log(xmlcellAssetName);
        var celltextAssetName = xmlcellAssetName.firstChild.data;

        //get the area
        var xmlcellArea = xmlrow.getElementsByTagName("area")[0];
        console.log(xmlcellArea);
        var celltextArea = xmlcellArea.firstChild.data;

        //get the land type
        var xmlcellLandType = xmlrow.getElementsByTagName("landtype")[0];
        console.log(xmlcellLandType);
        var celltextLandType = xmlcellLandType.firstChild.data;

        //get the Planning Permissions
        var xmlcellPlanning = xmlrow.getElementsByTagName("planning")[0];
        console.log(xmlcellPlanning);
        var celltextPlanning = xmlcellPlanning.firstChild.data;

        var htmlString = "Asset Name: " + celltextAssetName + "<br>" + "Size: " + celltextArea + "<br>" + "Land Type: " + celltextLandType + "<br>" + "Planning Permissions: " + celltextPlanning;
        //var htmlString = 'yes'
        var marker = createMarker(point,htmlString);
        batch.push(marker);

    }

    mgr.addMarkers(batch,50);
    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: 1100px; height: 700px"></div>
  </body>
</html>

Answer 1

Think you have a typo. In your code, you’re pulling an incomplete URL for the API:

<script src="//maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=AIzaSyDgybFoyn3i5j_6d7ul7p2dPNQ5b1xOWnk"

That errant // seems to be throwing the code off.

Though, to be perfectly honest, the originating example (and austin.html) doesn’t exactly work as one would imagine it should. The points do get rendered, but no effective clustering takes place when you zoom out. Suspect that the 2.0 branch of the API got moved to a newer version and created a bit of an incompatibility.

Recommend that you rewrite this in API version 3. There is a cluster manager that works for it quite well.

See http://tools.voanews2.com/nuclear_reactors/