Google Maps Quickstart Guide

Google Maps Quickstart Guide
Although the process to customize a Google Map seems intimidating, it's actually very simple. Each step is quite straightforward and the Google Maps API is well documented.

The first step to adding custom pictures to your map is, of course, to take the pictures. Since there's not currently (to my knowledge) a camera with a built-in GPS,
you'll have to document the location that you took the photograph yourself. This can be as simple as photographing the GPS screen before you take each picture. The GPS unit I used for my mapping project was my Garmin Rino 110. Because the location display is somewhat small on the Rino, I wasn't confident that the pictures I was taking of the screen would show up, so I wrote each estimated location on a topographic map and then took a picture of what I had written. This had the added advantage of making it easier to organize all the photos when I got home, but was a rather cumbersome process in the field. Certain cameras allow you to connect a GPS externally, but if you have a data cable for your GPS, you can do this automatically (I love this hack: you upload your GPS track to the computer and software compares the timestamp on your pictures to the location on the GPS track to tag the pictures with your location).

If you choose to write down or photograph the location data, do yourself a favor and make your GPS display the data in the format Google maps is expecting: decimal format. This means 36.27458 rather than 36°16.474799. On the Rino, this is done by changing the Position Format in Units section in the Setup menu to hddd.ddddd° (although it only displays the data in this format on the Trip Computer screen). If you forget to record your location data in this manner or are converting coordinates from another source, it's no big deal... just use one of the many online conversion tools (don't forget, it's easy to convert street addresses to GPS coordinates).

The absolute easiest way to generate a Google Map is to use a free map building solution, such as MapBuilder. This site lets you plug in a few data points and then paste the map source code into your web page. If you want a more customized map, you'll need to edit some javascript yourself. I'll be using the source from my aforementioned mapping demo for examples. Before you add any code to your web page you must first generate a free developer's key to add to your code. I won't go into all the details of the needed javascript, refer to the Google Maps API for full details.

function onLoad() {
if (GBrowserIsCompatible()) {
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setMapType(_SATELLITE_TYPE)
var centerpoint = new GPoint(-92.211866, 36.621033 );
map.centerAndZoom( centerpoint, 1);

This chunk of code tells the browser to display a map, to add the needed controls, to display a satellite image (rather than a street map or hybrid map), to center it on the given point and to zoom in at a particular level. It's worth noting that Google Maps expects location data in the reverse order that a GPS displays it (the east-west location before the north-south).



var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_green.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);

This code determines the shape and color of the icons that appear on your map. I used a generic green "pushpin" but determined developers can use their own markers.



var point0 = new GPoint(-92.211866, 36.621033 );
var marker0 = new GMarker(point0, icon);
map.addOverlay(marker0);

var html0 = "<center><b><a href=a.html><img src=athumb.jpg>Potential Building Site</a></b></center>";

GEvent.addListener(marker0, "click", function() { marker0.openInfoWindowHtml(html0); });

Now we're getting into mapping the points. The first point you map will be point zero (because that's where computers start counting). Set the location in the first line (in that backwards Google Maps format). The next two lines of code govern the icon behavior. The html line determines what will appear in the pop-up window when you click on the icon for that location. You can use words, images or a combination. Since I stored all the files for this map in the same directory on my server, I used relative links. The page a.html is a simple web page to hold the photos and description of that location (although the pop-up window could contain a link anywhere you wanted). Repeat this code for each data point you want, incrementing the number each time.


var polyline = new GPolyline([new GPoint(-92.2133, 36.62285),
new GPoint(-92.207566, 36.62285),
new GPoint(-92.207533, 36.6236),
new GPoint(-92.2133, 36.6236),
new GPoint(-92.2133, 36.62285)],
"#ff33FF", 2);

map.addOverlay(polyline);

The first few polylines I drew I did the hard way: point to point, then draw the line. The last few I did the easy way, as shown. This draws a line between the indicated lines in a dot-to-dot fashion. Don't forget to close the shape. You can set the color in hexidecimal and the width of the line in pixels. Polylines are great because they scale with the map when zoomed or dragged. An additional bit of code needs to be added to the very beginning of your page for the Polylines to display correctly in Internet Explorer.

All the script mentioned should be in the head portion of your web page. In your body this is all you need:

<BODY onload="onLoad()" BGCOLOR="#FFFFFF" TOPMARGIN="5" LEFTMARGIN="0">
<center>
<br>
<div id="map" style="width: 700px; height: 700px"></div>
</body>

You can set the background color, spacing behavior and size of your map here. Although in my mapping demo I used the map as the only item on a page, you could include a Google Map on any part of a page (as long as the Developer Key you generated matches the page the map is displayed on).

Although it seems like a lot of complicated javascript Google Maps are pretty simple once you get used to them. Rumor has it Google is planning to revamp the developer interface in the next few months and a few tags or bits of code might change but once a person understands the basic concepts, the new tags will be easy to adjust too. Future projects I envision for my personal use include a clickable map of all my Geocaching pictures and tagging my flickr photos with geographic information.