Simple overlays with Google Maps

January 28, 2010

The following is the basis of a tutorial I’ll be giving later today of a University of Memphis journalism class on various ways to create Google Maps.

1) Linking to or embedding Google MyMaps is the most simple way to begin.

Log into your Google account, head over to maps.google.com, and click “MyMaps” right under the Google logo. Add a new one and give it a name. It can stay unlisted if you want, so it won’t be publicly searchable, but you’ll still be able to link to it and embed the code.

Draw some shapes and drop some markers. Save your map. Above the map, far to the right, click the “Link” button. Grab the code from the top text box and add it to your story. Note: This link will capture your current zoom level and map type.

Example:

Joe Hayden is a professor at the University of Memphis Department of Journalism (map this).

But that forces readers to leave your site. A little more advanced way to do things is to embed the code from your MyMap into your story or blog post, such as this one. Go back to your MyMap, click the “Link” button again, but this time copy the code from the second text box that says “embed.”

Paste that code into your content management system or web page. Example:

View University of Memphis in a larger map

You can further customize the size and shape of your embedded map by clicking the link that says
“Customize and preview embedded map.”

2) Exporting the KML from your MyMap

Click the “View in Google Earth” link above your MyMap. This will let your download the KML file where your data is stored. You then want to overlay that file on a custom Google Map that you’ve created using the GMaps API. You’ll also need an API key, a code specific to your web site, which is free and easy to obtain here.

The code for the first example is available here. It’s in text format, so you’ll want to change the file extension from .txt to .html if you plan on working off that file. For working on plaintext web files, I recommend Notepad++, and for file management and FTP, FileZilla.

Upload that KML to your server and tell your html file where the kml overlay is located, at this line:

var boundaries = new GGeoXml(“http://grantmeaccess.com/gmaps/uofm.kml”);

3) Show multiple overlays on your custom map

Repeat the above steps to create another MyMap, export that KML file, upload it and just duplicate the overlay code.

Your original overlay code:

var boundaries = new GGeoXml(“http://grantmeaccess.com/gmaps/uofm.kml”);

map.addOverlay(boundaries);

Your new overlay code, with two overlays:

var boundaries = new GGeoXml(“http://grantmeaccess.com/gmaps/uofm.kml”);

map.addOverlay(boundaries);

var boundaries2 = new GGeoXml(“http://grantmeaccess.com/gmaps/uofm2.kml”);

map.addOverlay(boundaries2);

But say you want your user to be able to turn each of those layers on and off individually. Use this code.

That’ll give you a map like this.

If your content management system won’t let use that code, use an iframe (documentation here) to point the CMS to your html file.

Good luck!

Posted in journalism, maps, teaching