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");
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 callback function.
XML attributes strings can’t contain the characters < or >. You have to use < and >, 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<br>First Info Window</infowindow> </marker> </markers>
Or even like this, using CDATA:
<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>
When using CDATA, is is not necessary to use < and > in the contained HTML.
XML formatted like this can be read with GXml.value, like this
var html = GXml.value(markers[i].getElementsByTagName("infowindow"));
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.
- 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.
In particular “name” and “long” are reserved words.
- XML data strings can’t contain the characters &, < or >. You have to use &, < and >, which will get converted to &, < and >.
- Don’t have blank lines or spaces before the first tag in your XML file.
- 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.
- 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 < and > into < and > which are not permitted.