Building Your First Google Map Customization
Wed, 08/28/2013 - 09:15 pm
The best way to build your first Google Map page is probably to use their "Hello, World" page as a starting point.
- Open the link to the Console page [https://code.google.com/apis/console] in a new window or tab. We'll want to work with both the tutorial and console pages. If you don't yet have a Google account, sign up for one now. Then, log in to your account. You're likely to be asked how you can be contacted should you ever forget your password and to accept the terms of service. After going through all that, you should be looking at the Google APIs Dashboard. The first thing we'll do is specify that we're using the API key with the Maps API v3.
- Click on the Services link.
- Scroll down through the list of available services and set Google Maps API v3 to ON. Now we can move on to obtaining an API key.
- Click on the API Access link.
- Under the Simple API Access heading, click the Create new Browser key button. You will be presented with a Configure Browser Key dialog box.
- In the text box beneath the Accept requests from these HTTP referers... heading, enter the following:
*.personal.psu.edu/[your PSU access account ID]/*
For example, I entered *.personal.psu.edu/jed124/*
An API key was required in previous versions of the Google Maps API. You don't really need an API key when working with version 3 for personal use, but it's good to know how to obtain and use one in case you build a production application. If the API key gets in your way while testing (for example, when double-clicking your .html file on your local file system) you can remove the key. Just remove the text: key=AIzaSyD1PO2RgLOjIXNSd3_OSQ_UTFJV4sQocBE (your actual key will differ).
Click Create to complete the creation of the key. We'll come back to the console page in a moment, so be sure to leave it open.
- Open Notepad or another plain text editor.
- Return to the tutorial page and copy and paste the "Hello, World" code into your text editor.
- Now go back to the console page and copy your API key.
- In your text editor, locate the first script element and replace the YOUR_API_KEY text with the key you just copied from the console page.
- Later in the script element, find the string sensor=SET_TO_TRUE_OR_FALSE. Replace the SET_TO_TRUE_OR_FALSE text with the value false. (According to the documentation, this parameter is used "to indicate whether this application uses a sensor to determine the user's location." If you were developing a map application for use on a mobile GPS-equipped device such as an iPhone, you might set this parameter to true.)
- Save the file as lesson2.html.
- Upload your lesson2.html file to your personal web space and confirm that you see a map of Sydney, Australia. (If you upload the file to your root web space, it will be available at the address http://www.personal.psu.edu/[your PSU access account ID]/lesson2.html.)
Now, unless you live in Sydney this map probably won't be particularly useful to you. In the next section, we'll spend a good deal of time dissecting the various pieces of the code you just copied so that you are able to understand what each piece contributes to the page.