Developing a Custom Map Document

Developing a custom Google Maps application first involves deciding on a format for the data that you plan on feeding into Google Maps. This is where XML enters the picture in regard to Google Maps. Because the sample application you're working through in this lesson involves real estate developments, it's worth considering what pieces of information you might want to code in an XML document in order to map a piece of real estate property:

• Property name

• Physical address (mailing address)

• Thumbnail image for a Google Maps information window

• Geocoordinates (latitude and longitude)

• Status (active or completed)

By the Way

In the actual Haury & Smith custom mapping application that I developed, a URL is also specified for each real estate property to link from the map back to an information page on the main web site. Because there is no web site associated with the example in this lesson, I left out the URL.

These pieces of information are sufficient to describe any real estate property for the purposes of displaying information about the property in Google Maps. The trick is then determining the best way to effectively represent this information in the context of an XML document. Listing 15.1 contains the partial code for a document that solves this problem with ease.

Listing 15.1. The condos.xml Document Containing Condominium Map Data

 1: <?xml version="1.0"?>  2:  3: <projects>  4:   <proj status="active">  5:     <location lat="36.122238" long="-86.845028" />  6:     <description>  7:       <name>Woodmont Close</name>  8:       <address>131 Woodmont Blvd.</address>  9:       <address2>Nashville, TN 37205</address2> 10:       <img>condowc.jpg</img> 11:     </description> 12:   </proj> 13:   <proj status="active"> 14:     <location lat="36.101232" long="-86.820759" /> 15:     <description> 16:       <name>Village Hall</name> 17:       <address>2140 Hobbs Rd.</address> 18:       <address2>Nashville, TN 37215</address2> 19:       <img>condovh.jpg</img> 20:     </description> 21:   </proj> 22:   ... 23:   <proj status="completed"> 24:     <location lat="36.091559" long="-86.832686" /> 25:     <description> 26:       <name>Harding Hall</name> 27:       <address>2120 Harding Pl.</address> 28:       <address2>Nashville, TN 37215</address2> 29:       <img>condohh.jpg</img> 30:     </description> 31:   </proj> 32: </projects>

The listing contains the complete code for the condos.xml sample document that houses XML data for the real estate sample mapping application. As its name implies, the real estate properties coded in the document are condominium developments. However, all Google Maps will ultimately care about is the data stored in the <location> tag for each piece of property. The <location> tag is where the latitude and longitude for each condominium development is specified. More specifically, this information is provided via the lat and long attributes (lines 5, 14, and 24). Everything else in the document is just supplementary data to provide additional information when the user clicks one of the markers on the map. Even so, this information plays an important role in overall application.

The document is laid out as a series of <proj> tags that each represents an individual real estate project. These tags appear within the root <projects> tag (line 3). Each <proj> tag includes a status attribute that can be set to either active or completed based upon the status of the real estate project (whether it still has units available or it is sold out). The value of the status attribute determines what kind of visual marker is displayed on the map for a given project. Inside of the <proj> tag is a <description> tag that describes more details about a real estate project. The <name>, <address>, <address2>, and <img> tags all combine to provide information that will appear in the information window in Google Maps when the user clicks on a marker.

By the Way

It's important to point out that the project images in this sample document are specified without any path information, which means that they are expected to reside in the same folder as the XML document.

You now have a solid enough grasp on the underlying data for the mapping application example to push on further and learn how to assemble the code and stylesheet that actually make it work.