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.
- Passwords must be a minimum of 8 characters in length. For tips on creating a secure password click the “Password strength:” link.
- As you type your password Google™ indicates how secure your password will be: -
(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
- Characters are NOT case -sensitive.
- For anyone visually impaired click the image to listen to the characters being read aloud.
(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.
For a step-by-step guide to managing your Google Maps™ account profile refer to the Free Google Maps™ tutorial Create a Google Maps™ Profile
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.
(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.
It is recommended that you enter the “domain” details for your site without the “www” part. This will allow you to use the API key with the widest combination of domains, sub-domains and folders on your site.
In this example, http://websitelocationmaps.com
(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.
Do not right click the code and click “Select All” or click “Select All” from the browser Edit menu to copy the code. This method will select everything on the page and not just 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.
The unique Google Maps™ API key in this example code (highlighted) is unique to http://www.websitelocationmaps.com
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.
- Declares a user defined local function called load()
- 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.
- 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)
The variable referenced as “map” which is assigned the instance of the new Google™ Map is different to the <div> with an ID of “map” that will act as the container for the Google™ Map.
- 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.
- 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.
- 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.