Google Maps™ API Tutorials - Volume 1 - Getting Started

Introduction

This advanced Google Maps™ API tutorial has been produced by White Rock Solutions as part of a series of complete and comprehensive step by step guides to using the Google Maps™ API to develop searchable interactive Google™ location maps and Google™ map applications.

Overview : Google Maps™ API Tutorials - Volume 1 - Getting Started

To use the Google Maps™ API to develop searchable interactive Google™ location maps and Google™ map applications you will need to sign up for a Google™ Account and Google Maps™ API key.

Part 1 – Sign Up for a Google™ Account

Part 2 – Sign Up for a Google Maps™ API Key

Part 3 – Google Maps™ API - Example Code Explained

Part 4 – Google Maps™ API - Example Map Explained

Sign Up for a Google™ Account

To sign up for a Google Maps™ API Key you will need an existing Google™ account. If you do not have an existing Google™ account complete the following steps to sign up for a new account:

Step 1 - Complete Google Maps™ "Create an Account" Form

(a) Open the Google Maps™ website in your web browser.

(b) Click the Sign in link in the top right hand corner of the page.

 (c) Click the “Create an account now” link towards the bottom right hand corner of the page.

(d) Enter the Email Address you would like associated with your Google™ account.

(e) Choose a Password for your Google™ account and re-enter the same password to verify that you have typed it correctly.

(f) By default Remember me on this computer is selected (). If you prefer to enter your email address and password each time you sign in to your Google™ account click the check box to remove the tick ().

(g) By default Enable Web History is selected (). Click the “Learn more” link to find out more about Web History. If you prefer not to enable Web History at this time, click the check box to remove the tick ().

(h) Click the arrow and select the country for the Location where you live.

(i) In the Word Verification section, type the characters that appear in the picture. In this example, FAURSI

(j) Read through the Google™ Terms of Service. Alternatively, click the “Printable Version” link to view and print the Google™ Terms of Service. The Google™ Privacy Policy can also be viewed by clicking the “Privacy Policy” link.

(k) Click the button to accept the Google™ Terms of Service and create your Google™ account.

Step 2 - Verify Email Address

On completion of the Create an Account form, Google™: -

(a) Generates and sends an email to the email address associated with your newly created Google™ account asking you to verify your email address.

(b) Automatically signs you in to your newly created Google™ account.

(c) Open the email received from Google™ and click on the link to verify your email address.

(d) Google™ confirms that your email address has been verified.

Sign Up for a Google Maps™ API Key

To sign up for a Google Maps™ API Key you will first need to sign in to your Google™ Account.

Step 1 - Sign in to Google Maps™ with your Google™ Account

(a) Open the Google Maps™ website in your web browser.

(b) Click the Sign in link in the top right hand corner of the page to sign in to Google™ with your Google™ account.

(c) Enter your Google™ account Email and Password details and click the button.

Step 2 - Generate Google Maps™ API Key

(a) Open the Google Maps™ API Key Sign Up web page in your web browser.

(b) Read through the information including the Google Maps™ API Terms of Use. Click any of the links to view additional information.

(c) Alternatively, click the “Printable Version” link to view and print the Google Maps™ API Terms of Use.

(d) Click the check box to insert a tick () to confirm you have "read and agree with the terms and conditions".

(e) Enter the My web site URL to associate with this specific Google Maps™ API key.

(f) Click the button to generate the unique Google Maps™ API key that will be associated with your specific web site URL and Google™ account.

Step 3 - Save API Key and Example Code

On completion of signing up for a Google Maps™ API key, Google™: -

(a) Generates a unique Google Maps™ API key that will be associated with your specific web site URL and Google™ account.

(b) Confirms the web site URL associated with this unique Google Maps™ API key.

(c) Generates code for an example web page containing a basic Google™ Map to get you started that uses your unique Google Maps™ API key generated (highlighted). The code generated is XHTML 1.0 Strict compliant.

(d) To copy the code for the example web page containing a basic Google™ Map, which includes your unique Google Maps™ API key, click and hold down the left mouse button before the first character of the generated code in the shaded box.

(e) Whilst still holding down the left mouse button drag the mouse cursor across the code to the last character of the generated code in the shaded box. As this is done the code becomes “highlighted”.

(f) Select Copy from the browser Edit menu to copy the code. Alternatively press the “Ctrl” key and the “C” key on the keyboard simultaneously to copy the code.

(g) Open a new blank document in a text editor such as Notepad or WordPad.

(h) Press the “Ctrl” key and the “V” key on the keyboard simultaneously to paste the code.

(i) Select Save As from the text editor File menu to save the file. Alternatively press the “Ctrl” key and the “S” key on the keyboard simultaneously to save the file. Ensure you save the file with a “.htm” or “.html” file extension.

Google Maps™ API - Example Code Explained

Below is an example of the code generated on completion of signing up for a Google Maps™ API key.

Each section of the code is explained below. Some of the code is standard XHTML 1.0 Strict code used to create the example web page itself. However, the specific Google Maps™ API related code is covered in detail in code sections 3c, 3d and 4 below : -

Code Section 1

This is a mandatory line of code or declaration for any XHTML Strict web page. Alternatively a conforming XHTML web page may be declared as transitional. 

Check out http://www.w3.org/TR/xhtml1/ for further details

Code Section 2

The root element of any XHTML Strict web page must be <html> and contain an xmlns declaration such as:

Code Section 3

(a) A <meta/> declaration is placed in the <head> section of the document and is used to set the Character En-coding for the web page. In this case, charset=utf-8 is the Universal Alphabet.

(b) This is the title of the web page which will be displayed in the title bar of the web browser.

(c) This piece of JavaScript code loads the Google Maps™ API using the unique “key” (highlighted) that is associated with your individual Google™ account and the web site URL: entered when the API key was generated.

(d) This next piece of JavaScript code:-

1. Declares a user defined local function called load()
   
2. Calls the global function GBrowserIsCompatible() to check if the web browser being used to view the Google™ Map is compatible with the Google Maps™ API.
   
3. If the web browser is compatible: -
   

(i) Declares a new variable referenced as “map”

(ii) Uses the function document.getElementById("map") to specify the “container” on the web page where the Google™ Map will be generated. In this case the page Element (IE: a <div>) with an Id of “map” (Refer Code Section 4).

(iii) Creates a new instance of the “GMap2” control (a Google™ Map) in the "container" specified in the previous step.

(iv) Assigns the new Google™ Map instance to the variable (var) referenced as “map”.

(i) Calculates a new geographical point in latitude and longitude coordinates using the Google Maps™ API function GLatLng which will be specified as the center point of the map.

(ii) Specifies the initial zoom level, in this case “13” (highlighted).

(iii) Parameters used to set the map center and initial zoom level

(iv) Sets the Center and initial Zoom Level for the map instance assigned to the variable referenced as "map" (map.setCenter)

Code Section 4

1. Calls the local user defined function “load()“ when the <body> of the web page is fully loaded (onload) in the web browser window. The “load()“ function creates the map (Refer Code Section 3d) on the web page.
2. Calls the Google Maps™ API utility function GUnload() when the <body> of the web page is un-loaded (onunload) from the web browser window. The function GUnload() is designed to prevent memory leaks.
3. Declares a new <div> with an ID of "map" to act as the “container” on the web page where the Google™ Map will be generated. Specifies a width and height for the <div>. The Google™ Map generated will have the same width and height dimensions as its <div> container.

Google Maps™ API - Example Google™ Map Explained

Below is the example Google™ Map generated by the example code on completion of signing up for a Google Maps™ API key.

(1) Powered by Google™ Image

A Powered by Google™ hyperlinked image is overlayed on the bottom left hand corner of the map. The hyperlink tooltip prompts the user to “Click to see this area on Google Maps™”. When the Powered by Google™ hyperlinked image is clicked a new web page or tab is opened to display the currently displayed area on the current map as a larger map on the Google Maps™ website.

(2) Terms of Use

A Terms of Use text hyperlink is overlayed on the bottom right hand corner of the map. When the Terms of Use hyperlink is clicked a new web page or tab is opened to display the Google Maps™ Terms and Conditions web page (http://www.Google.com/intl/en_ALL/help/terms_maps.html).