We commonly get questions regarding how information can be read from an XML file and displayed in Google Maps as markers. In this post I’d like to detail how this is accomplished through the Google Maps API. By way of example we are going to examine a simple application that displays various historic landmarks from the city of Austin, Texas. Our XML file, called Landmarks.xml, contains several dozen landmarks in a format as seen in the figure below.
This file contains elements for latitude and longitude which we’ll use to plot the marker along with four attribute elements including the building name, address, ownership type, and the date the structure was constructed. What we’re going to do in this simple application is read this file, plot out a new instance of GMarker using the <Longitude> and <Latitude> elements for each site, and display the attributes in an info window. Keep in mind that we are only scratching the surface of what an info window can hold in this example. We are simply printing text to the info window, but you can also add images, links, and video to your info windows as well. In addition, the use of a tabbed info window can assist with grouping your information.
We are going to examine a couple different methods that the Google Maps API provides for reading XML files. To follow along with the code feel free to open Landmarks.xml in your favorite text editor. You can view the finished application here.
GXmlHttp
The Maps API contains a method called GXmlHttp() which is used to create a browser-neutral XmlHttpRequest() object that works with Internet Explorer, Firefox, and Safari. As with all instances of XmlHttpRequest, the XML file that you access must be on your local domain. Cross domain transfers are not allowed unless specifically defined through a proxy server or some other option for working around cross-domain browser restrictions.
In the code example below we open our Landmarks.xml file (which is on our local domain) by calling the open() method on an instance of GXmlHttp that we created with GXmlHttp.create().
The readyState property is then used inside the onreadystatechange event handler to determine the status of the request. One of five states can be assigned to the readyState property.
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
The state we are interested in is a value of 4 which indicates that the request is complete and we now have a response from the server.
In addition to checking the readyState property we can also check the GXmlHttp.status or GXmlHttp.statusText properties to get confirmation that the transaction completed successfully before performing an operation on the results. A value of 200 in the status property (as seen in this code example) or ‘OK’ in the statusText property indicates success. Assuming that we have a readyState value of 4 and a status of 200 we can continue processing the file.
Data returned in the response can be accessed through the responseText or responseXML properties. The responseText property provides only a string representation of the data while the responseXML property gives us access to data that is returned in a well-formed XML DOM object that can then be parsed using node tree methods and properties. In this case we are using responseXML. The XML DOM object, called ‘xmlDoc’ in this case, can then be traversed. In the code below we are creating a list of <Row> elements by using the ‘getElementsbyTagName’ method.
From here we are going to loop through each <Row> using a JavaScript ‘for loop’. For each row we pull out the values for <Latitude>, <Longitude>, <Building_Name>, <Address>, <Ownership> and <Date_Built>.
With the values for latitude and longitude we create a new instance of GLatLng.
Each of the attributes (Building Name, Address, Ownership Type, and Date of Construction) are pulled for each row and added to a new string value called ‘htmlString’. Finally, we call the ‘createMarker() method passing in the new instance of GLatLng (‘point’ variable) and our ‘htmlString’ variable.
The ‘createMarker’ method creates a new GMarker for each point and adds the text to an info window for the marker. This marker is then returned to the calling function where it is placed into an array which will eventually be used with MarkerManager to display each of the points. MarkerManager is a Google Maps API Utility class that can efficiently add large numbers of markers to the Google Maps display.
GDownloadUrl
A simpler method of reading an XML file is through the use of GDownloadUrl in conjunction with GXml.parse() as seen in the figure below. GXml.parse() takes a string of XML as its only argument. In this case, the XML from Landmarks.xml is passed into the variable ‘data’ and then into GXml.parse( ).
GDownloadUrl eliminates the need for ‘readyState’checking.
