Techtorial: Google Maps for Beginners
You've probably noticed by now that interactive maps are everywhere on the 'Net. There are maps that can help you locate sites from the Bible, find water, and even turn it into wine. (OK, that last promise may have been a bit of an overstatement.)
There are also many different tools and methods to create and show maps on the 'Net, but surely the most ubiquitous example is the Google Map. Google rules the world of online mapping because it provides a free, powerful API that has inspired a devoted community of online cartographers to spread it far and wide across the Web. But Google also provides a simple interface that allows even fairly regular folks to tame their maps apps. In this tutorial we'll introduce the Google Maps GUI interface, create a simple map that can be embedded on a website, and finally import data from an existing map to create a "mashup." So put down that drafting compass and let's get on the road!
The first thing you'll need to get started with Google Maps is a Google account. If you don't have an account yet you can go here to set one up. Once you've created your account go to the Google home page and log-in. (If you've logged in properly you should see links for "My Account" and "Sign Out" at the top right-hand corner of your browser.) Now click on the "Maps" link in the main Google text navigation at top left to go the Google Maps home page. Now click on the "My Maps" link in the blue bar near the top of the page. Your browser window should now look something like this:
Now let's create a new map. This too is as simple as can be: just click on the "Create new map" link. Two text fields and a check box should now appear in the left-hand column. Use these fields to enter a title and description for your new map and to set whether it is available (i.e. searchable) to the Public or "Unlisted." I've titled my map "My Test Map" and have chosen not to share it with the world at large by selecting "Unlisted."
You may have noticed that, upon creating your new map, a new toolbar was also displayed near the upper left of the Map display area. It looks like this:
These are the map editing tools, and they indicate that the map that's currently displayed is in editing mode. From left to right, these icons are the selection tool, the placemark tool and the line tool. The selection tool is used to drop and drag the map and to select items shown on the map. The line tool can be used to create routes -- walking or biking paths for instance -- and also to define shaded areas via the shape tool, which is available from the drop down list when you click this icon.
But the placemark tool -- which resembles a pushpin -- is probably the most useful utensil for adding information to your map. The placemark tool is used to add points of interest -- addresses, landmarks, businesses, or anything else -- to your map. To add a placemark to your map, simply zoom in to the spot you'd like to mark, click on the tool icon to activate it, and then drop your placemark in the spot where you'd like it to appear using the crosshairs. (If your aim isn't perfect you can always re-position your placemark later by using the selection tool. A tip: Double clicking on a map will simultaneously re-center the map to where you clicked and zoom in one level closer.)
Once you've placed a new placemark on your map a dialogue box like this one should pop up:
The options available in the placemark dialogue box are pretty straightforward. Like your map itself, you can create a title and description to describe your new placemark. This information will be displayed in a similar pop-up bubble whenever a user clicks on the placemark. You can select a different icon for your new placemark by clicking the currently displayed placemark icon (a blue pin in the screenshot above) in the upper-right-hand corner of the dialogue box. The "Rich Text" link can be used to style the text in the description and to add links or images. You can even add a video to a description bubble using the "Edit HTML" link. (The simplest way to do this is to copy/paste the embed code from a video community site like YouTube). When you're done editing your placemark click "OK" to save it.
As it turns out, the placemark I created in the example above is not in the actual spot where my office is located. I could always click and drag it a bit downtown, but there's an easier way to get it in just the right spot using the Google Maps search. Here's how to do it:
- Search for an address in the main Google Maps search box -- the address I want to plot is "450 W 33rd St, New York, 10001"
- The address you searched should show up as a placemark on the map. Similar (and sometimes more specific) addresses may be returned as a list of links to the left of the map.
- Click on the "Save to My Maps" link at the bottom of the placemark's info window, then select the map you'd like to add the placemark to and click the "Save" button. That's it!
There are two things that may come in handy to know at this point: If you ever get lost and can't get back to your map just use the "My Maps" link near the top of the page to make your way back to it. Also, if after a few searches your map is showing items that you don't want displayed, you may need to use the "recent searches/currently displayed" selection area to show or hide different maps and placemarks. (Note: I couldn't find the official name for this widget in the Google documentation, but "recent searches/currently displayed" pretty much summarizes what it does.) The "currently displayed" area looks like this:
The "recent searches/currently displayed" area. "My Test Map" is the only item currently selected to be displayed on my map
Now let's do something really cool -- let's pull in a bunch of information and placemarks from an existing map to create a new, editable base map of our own.
There are lots of public maps made by other Google users that you can pull data from to use on your own map. As an example, let's say you're taking a trip to the Big Apple and you'd like to see some museums while you're in the city. A search of "Museums in Manhattan, New York, NY" returns a ton of data, but I can limit the results set by clicking on "show search options" link to the right of the search box. A dropdown list is now displayed with various selectors that I can use to make my results more specific. In this case, I'm going to select "Related Maps" and perform my search again.
Using the results dropdown list to filter results for related maps only
Now, after performing a search, the results area to the left of the map shows a list of links of public maps created by other users. After looking at a few of these maps, which vary in comprehensiveness and editorial content, I found a one I liked titled "New York City Museums". Once I have this map on my screen, I can use it's RSS feed to load the data it contains into a map of my own. To get the URL for a map's RSS feed, control-click and copy the target of the RSS link shown above the map display. (Alternatively, you can click on the link and then copy the URL for the map's RSS feed from your browsers address bar.)
The orange RSS logo and link can be used to get the URL for a Google Maps' RSS feed
Now let's load this RSS data into a map of our own. Bring up a map you've created and make sure it's in edit mode. You should see an "Import" link to the left of the map window. Click this link and then paste the URL of the RSS feed you copied from the public map. Voila! You now have a new map you can edit complete with pre-populated placemarks and information windows!
Here's the map of museums in New York that I created using an existing map. (It's publically editable if you'd like to give it a whirl.)
We've just seen the tip of the iceberg of what Google Maps can do. If you'd like to dive in deeper -- and you have some level of programming expertise -- you may want to explore the Google Map API documentation. But regardless, don't be afraid to experiment with Google Maps and to share them on your site and with others. And then give yourself a little credit for making the world a slightly easier place to navigate.
Resources