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 creates a request to obtain the data, sets up a function to process the state change events that happen on that request, then performs request.send(null) to send the request.

At some later time, the request changes status. We're only interested in the situation where the ready state is 4 meaning that the data has been successfully obtained.

Once the data has been read, the event function can grab a collection of data from the XML tags var markers = xmlDoc.documentElement.getElementsByTagName("marker");, then for each of those tags extract the individual attribute fields var lat = parseFloat(markers[i].getAttribute("lat"));.

Once all the data has been parsed, we can create the markers and the sidebar as in the previous examples.

Note that the code to insert the assembled sidebar information into its <div> must be inside the event handler 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. For all this to work, your server needs to set the correct MIME type (text/xml) for the XML file. That shouldn't be a problem if your file is hosted by a well established Internet provider because they tend to work out the MIME types from the file extensions.
   If you're managing your own server, you may need to set the MIME type yourself. The details of how to set the MIME type vary depending on your webspace provider.
    
   You can check the MIME type in Firefox by loading the XML file directly in your browser and using "View page info".
   If you can't find a way to set the MIME type to "text/xml" then you can try using:
   var xmlDoc = GXml.parse(request.responseText);
    
   
2. 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 "request.send(null)" statement. 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 "if (request.readyState == 4)" block.
    
   
3. 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 go horribly wrong when you change the mapType, and the Google code tries to perform arithmetic on values that are not numbers.
    
   
4. Avoid attribute names that are reserved words in either Javascript of HTML.
   In particular "name" and "long" are reserved words.
    
   
5. XML data strings can't contain the characters &, < or >. You have to use &amp;, &lt; and &gt;, which will get converted to &, < and >.
    
   
6. Don't have blank lines or spaces before the first tag in your XML file.
    
   
7. 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.
    
   
8. 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