Google Maps API Tutorial

XML

The preferred method for handling large numbers of markers is to store the data in an XML file.

It's also possible to have an application (e.g. mySQL) running on your server which returns XML containing a different selection from the data depending on query information derived from what your users input. I'm not going to cover the mySQL side of things in this tutorial.

Here's a simple example

You can see the XML data file that I used here

The code used GDownloadUrl() to send a request to read the file.

At some later time, the reply comes back and the callback funtion gets invoked.

Once the data has been read, the callback function can grab a collection of data from the XML tags

   var markers = xmlDoc.documentElement.getElementsByTagName("marker");

   var lat = parseFloat(markers[i].getAttribute("lat"));

Note that the code to insert the assembled sidebar information into its <div> must be inside the callback function.

XML attributes strings can't contain the characters < or >. You have to use &lt; and &gt;, which will get converted to < and > as the XML data is read.

Instead of using XML attributes, it's possible to lay out your XML data like this:

   <markers>
     <marker lat="43.65654" lng="-79.90138" label="Marker One">
      <infowindow>Some stuff to display in the&lt;br&gt;First Info Window</infowindow>
     </marker>
   </markers>

   <markers>
     <marker lat="43.65654" lng="-79.90138" label="Marker One">
      <infowindow><![CDATA[
        Some stuff to display in the<br>First Info Window
      ]]></infowindow>
     </marker>
   </markers>

XML formatted like this can be read with GXml.value, like this

   var html = GXml.value(markers[i].getElementsByTagName("infowindow")[0]);

Potential Pitfalls

1. Be aware that Javascript i/o is asynchronous (so that the browser can get on with doing other things like fetching images if the i/o request takes a while to complete).
   If you're used to programming languages that wait for i/o to complete, you might tend to put code that uses the data read from the XML file after the "GDownloadUrl()" code. That would be wrong because code placed there would get executed immediately rather than waiting for the data to arrive. Any code that acts on the retrieved data should be placed inside the callback function.
    
   
2. All data returned from XML is considered to be strings of characters. You need to convert your latitude and longitude from strings to floating point numbers by using "parseFloat()".
   In some circumstances, it might seem that you can get away without doing that, but then things can go horribly wrong later. if the Google code tries to perform arithmetic on values that are not numbers.
    
   
3. Avoid attribute names that are reserved words in either Javascript or HTML.
   In particular "name" and "long" are reserved words.
    
   
4. XML data strings can't contain the characters &, < or >. You have to use &amp;, &lt; and &gt;, which will get converted to &, < and >.
    
   
5. Don't have blank lines or spaces before the first tag in your XML file.
    
   
6. Don't get confused between the array of marker objects "gmarkers[ ]" and the HTMLCollection of marker data "markers[ ]" that gets returned by getElementsByTagName(). You can't do things like map.addOverlay(marker[i]) to a HTML data element.
    
   
7. If you want to copy my example.xml file, use the "view source" option in your browser, rather than saving it from the normal browser screen. Some browsers display extra formatting characters which you don't want to have in your copy. All browsers will convert things like &lt; and &gt; into < and > which are not permitted.

Back to Mike's Homepage
Up to the start of this tutorial