The best way to build your first Google Map page is probably to use their "Hello, World" page as a starting point.
- 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.
- Click on the API button on the Project Dashboard page.
- In the left-hand pane, under the APIs & auth heading, click on the Credentials link.
- Under the Public API Access heading, click the Create new Key button. You will be presented with a Create a new key dialog box.
- Select Browser key.
- 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/*
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).
- 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 Getting Started page, scroll down to the Hello, World section and copy and paste the code there 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.
- Save the file as lesson3.html.
- 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.