My awesome wife bought me a Garmin Oregon for Christmas, and I had my first real chance to use it this past weekend in Arizona at the annual data nerd conference.
Saturday afternoon my co-consipirators and I drove off into the desert mountains and explored Canyon Lake for a bit. I was the only one fishing who didn’t catch anything, but I did not return empty-handed.
I just grabbed some data off my new mapping toy, tweaked it with Mapsource and used Google Earth to edit the popup windows and export the KMZ.
You can click on the route to bring up its data, or click on the waypoint for a picture of the first success of the day.
UPDATE: The image popup is a little wonky. Don’t know why. Anyone?
UPDATE 2: Added two new points with photos from Pell and fixed the wonikiness. Forgot to set the info window height, so it didn’t know how big to go until it had already loaded and floated the image outside the window.
Deb Wenger, of the University of Mississippi School of Journalism, came up to the Commercial Appeal a few weeks ago to interview some of the folks involved in our True Crime project.
Her case study will be out on thecrimereport.org in the next week or so, and will include my how-to guide to working with crime data. In the meantime, enjoy this accompanying video she produced.
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:
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”);
Upload your html file and your map should look something like this.
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.