GEOG 863
GIS Mashups for Geospatial Professionals

Building Your First Google Map Customization

PrintPrint

The best way to build your first Google Map page is probably to use their "Hello, World" page as a starting point.

  1. Head over to the "Getting Started" section of the API documentation. As the tutorial says, the first step in building a map page is to browse to the Google APIs Console to obtain an API key.
  2. Open the link to the Console page 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 Developers Console, with a Dashboard appearing in the primary window pane. The first thing we'll do is specify that we want to work with the Maps JavaScript API.
  3. Click on the Enable API link.
  4. In the list of APIs that appears on the right, click on Google Maps JavaScript API under the Google Maps APIs heading, then on the Enable button. Now we can move on to obtaining an API key.
  5. In the left-hand pane, click on the Credentials link.
  6. Select Create credentials > API key.  You will be presented with a Create a new key dialog box.
  7. Select Browser key.
  8. In the text box beneath the Accept requests from these HTTP referrers... heading, enter the following:

    *.personal.psu.edu/[your PSU access account ID]/*

    For example, I entered *.personal.psu.edu/jed124/*

    Note

    It turns out that you don't really need an API key when working with the Maps API, 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).

  9. 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.
  10. Open Notepad or another plain text editor.
  11. Return to Google's Getting Started page, scroll down to the Hello, World section and copy and paste the code there into your text editor.
  12. Now go back to the Console page and copy your API key.
  13. In your text editor, locate the second script element and replace the API_KEY text with the key you just copied from the console page.
  14. Save the file as lesson3.html.
  15. Upload your lesson3.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]/lesson3.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.