Jen and Barry Candidate Sites

Since I have done this project before, I decided to try to use an array to store the coordinates and HTML data in the beginning of the script and use a loop to add the marker data from the array. This is not really necessary for a map this simple, but if you had a series of maps with say, 3 to 9 markers each, this design would be more efficient. The map above adds more functions to a customized Google Map. It adds controls to change and set the map type using map.addControl(new GMapTypeControl()) and map.setMapType(); and a control to add a small version of the pan and zoom tools using map.addControl(new GSmallMapControl()) in the load map function section of the code. This part was fairly simple to implement.

The most significant additions to the map were custom icons and interactive pop up windows that display information on the icon location when clicked. I was stuck for a long time with either the custom icon or the pop up windows working, but not both. The key was initializing the cityIcon variable in the new GMarker() statement. It was used to create the marker variable found right after the command, function createMarker(). Setting up all of the options for the cityIcon variable to display the cone and shadows correctly was fairly straightforward. The numerous examples in the lesson and on Google’s API site were very helpful. I used XTools Pro (http://www.xtoolspro.com/) to add decimal degree longitude and latitude fields to the Jen and Barry attribute table and also to export the fields I needed into an Excel spreadsheet to more easily cut and paste the data into the script. Excel also has the option of exporting to an XML spreadsheet format which might be an easy way to edit the data into another XML format that a script can load into Google Maps in the next lesson.

Valid XHTML 1.0 Strict Valid CSS!