Google Maps™ API - Advanced Tutorials

Introduction

These advanced Google Maps™ API tutorials have 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.

Volume 1 - Getting Started Available Now !!

Volume 2 - Create a Custom Google™ Map Template Available Now !!

Volume 3 - Add Map Controls to a Google™ Map Available Now !!

Volume 4 - Add Placemarks (Markers) to a Google™ Map Available Now !!

Volume 5 - Standard Info Windows Available Now !!

Volume 6 - Tabbed Info Windows Available Now !!

Register as a free member of our website to be notified as soon as new or updated tutorials are published. Alternatively, use the button above to bookmark our website and check back regularly...

Overview : Volume 1 - Getting Started

In Volume 1 - Getting Started we look at some of the requirements for using the Google Maps™ API. These include signing up for a Google™ account and signing up for a Google Maps™ API key.

We look very briefly at the example code generated on completion of signing up for a Google Maps™ API key explaining the easiest way to select, copy and save the code as a starting point for creating your own custom Google Maps™.

We then take a detailed look at the example Google Maps™ API code, break the code down into code sections and provide a detailed explanation for each section of the example code.

Finally, we look at the example Google™ map generated by the example API code and explain some of the basic map elements that automatically appear on the map.

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 (Updated 15th Aug 2008)

Part 4 – Google Maps™ API - Example Map Explained

Overview : Volume 2 - Create a basic Google Maps™ Template

In Volume 2 - Create a basic Google Maps™ Template we cusomize the example Google Maps™ API code generated on completion of signing up for a Google Maps™ API key and save the customized code as a valid XHTML 1.0 Strict Google Maps™ template. This basic Google Maps™ template will be used as the starting point to produce custom Google Maps™ in future tutorials.

Part 1 – Browser Compatibility – Display Notification Message

Not all web browsers support the Google Maps™ API. The example code generated on completion of signing up for a Google Maps™ API key checks for browser compatibility with the Google Maps™ API but does not display a notification message if the browser is not compatible, the map simply does not load.

In this tutorial we add code to the example Google Maps™ API code generated on completion of signing up for a Google Maps™ API key to display a notification message if the web browser is not compatible with the Google Maps™ API.

Part 2 – Check JavaScript Enabled and Display Notification Message

Google Maps™ requires JavaScript to be enabled. Not all users run their web browsers with JavaScript enabled. The example code generated on completion of signing up for a Google Maps™ API key does not check that JavaScript is enabled and does not display a notification message if JavaScript is disabled, the map simply does not load.

In this tutorial we add code to the Google-Maps-API-Basic-Map-Template.htm file saved in Part 1 – Browser Compatibility – Display Notification Message to check if JavaScript is enabled and if not display a notification message.

Part 3 – Modify the Example Google Maps™ API Code

In this tutorial we edit code in the Google-Maps-API-Basic-Map-Template.htm file saved in Part 2 – Check JavaScript Enabled and Display Notification Message.

To remove any future confusion between the variable referenced as “map” which is assigned the instance of the new Google™ Map and the <div> with an ID of “map” that will act as the container for the Google™ Map we will rename both.

We will also rename the function load() to make it more intuitive.

Downloads

Subscribers to this volume of tutorials can download the following source code: -

Example-Google-Maps-API-Code.htm
Google-Maps-API-Basic-Map-Template_CompletionPart1.htm
Google-Maps-API-Basic-Map-Template_CompletionPart2_Updated.htm
Google-Maps-API-Basic-Map-Template_CompletionPart3_Final.htm

All source code files are valid XHTML 1.0 Strict.

Overview : Volume 3 - Add Map Controls

In Volume 3 - Add Map Controls we start by taking a close look at the different types of map controls that can be added to a Google™ map using the maps API.

We then guide you step by step through an example of adding Google Maps™ API code to the Google-Maps-API-Basic-Map-Template.htm file from Volume 2 - Google Maps Template to display various map controls on our Google™ Map.

Part 1 – Overview of Map Controls

Navigation and/or Zoom Controls

There are three types of Navigation and/or Zoom Controls that can be added to a map. Navigation and Zoom Controls are optional as there are alternative ways to navigate and zoom without using one of these three controls.

Map Scale Control

There is only one type of Map Scale Control that can be added to a map.

Overview Map Control

There is only one type of Overview Map Control that can be added to a map.

Map Type Controls

There are three Map Type Controls that can be added to a map.

Part 2 – Add Map Controls to a Google™ Map

A detailed explanation of the API code used to add each type of map control to a Google™ Map.

Part 3– Add Map Controls to a Google™ Map - Example

Step by step worked example of adding API code to add map controls to a Google™ Map.

Downloads

Subscribers to this volume of tutorials can download the following source code: -

Google-Maps-API-Basic-Map-Template.htm
Google-Maps-API-Basic-Map-Template_MapControls.htm

All source code files are valid XHTML 1.0 Strict.

Overview : Volume 4 - Add Placemarks (Markers)

In Volume 4 - Add Map Placemarks (Markers) we start by taking a detailed look at the Google Maps™ API code used to add a single "un-named" and "named" placemark (marker) to our Google™ Map template..

Part 1 – Add a Placemark (Marker) to a Google™ Map

A detailed explanation of the API code used to add an "un-named" and "named" placemark (marker) to a Google™ Map.

Part 2 – Add a Placemark (Marker) to a Google™ Map - Example

Step by step worked example of adding API code to add a "named" placemark to a Google™ Map.

Downloads

Subscribers to this volume of tutorials can download the following source code: -

Google-Maps-API-Basic-Map-Template.htm
Google-Maps-API-Basic-Map-Template_Placemarks.htm

All source code files are valid XHTML 1.0 Strict.

Overview : Volume 5 - Standard Info Windows

In Volume 5 - Standard Info Windows we start by providing an overview of the different types of Info Windows that can be added to a Google™ Map. We then take a detailed look at the Google Maps™ API code used to automtaically open an Info Window attached to a map instance or attached to a "named" placemark.

We then guide you step by step through two examples of adding Google Maps™ API code to the Google-Maps-API-Basic-Map-Template.htm file from Volume 2 - Google Maps Template to automtaically open an Info Window attached to a map instance and attached to a "named" placemark

Part 1 – Overview of Info Windows

Overview of the different types of Info Windows that can be added to a Google™ Map.

Part 2 – Automatically Open a Standard Info Window on a Google™ Map Instance

A detailed explanation of the Google Maps™ API code used to automatically open a Standard Info Window on a Google™ Map Instance.

Part 3 – Automatically Open a Standard Info Window on a Google™ Map Instance - Example

Step by step worked example of adding Google Maps™ API code to the Google-Maps-API-Basic-Map-Template.htm file to automatically open a Standard Info Window on a Google™ Map Instance.

Part 4 – Automatically Open a Standard Info Window on a Google™ Map Placemark

A detailed explanation of the Google Maps™ API code used to automatically open a Standard Info Window on a Google™ Map Placemark.

Part 5 – Automatically Open a Standard Info Window on a Google™ Map Placemark - Example

Step by step worked example of adding Google Maps™ API code to the Google-Maps-API-Basic-Map-Template.htm file to automatically open a Standard Info Window on a Google™ Map Placemark.

Downloads

Subscribers to this volume of tutorials can download the following source code: -

Google-Maps-API-Basic-Map-Template.htm
Google-Maps-API-Basic-Map-Template_MapInfoWindow.htm
Google-Maps-API-Basic-Map-Template_PlacemarkInfoWindow.htm

All source code files are valid XHTML 1.0 Strict.

Overview : Volume 6 - Tabbed Info Windows

In Volume 6 - Tabbed Info Windows we start by providing an overview of the different types of Info Windows that can be added to a Google™ Map. We then take a detailed look at the Google Maps™ API code used to automtaically open a tabbed Info Window attached to a map instance or attached to a "named" placemark.

We then guide you step by step through two examples of adding Google Maps™ API code to the Google-Maps-API-Basic-Map-Template.htm file from Volume 2 - Google Maps Template to automtaically open a Tabbed Info Window attached to a map instance and attached to a "named" placemark

Part 1 – Overview of Info Windows

Overview of the different types of Info Windows that can be added to a Google™ Map.

Part 2 – Automatically Open a Tabbed Info Window on a Google™ Map Instance

A detailed explanation of the Google Maps™ API code used to automatically open a Tabbed Info Window on a Google™ Map Instance.

Part 3 – Automatically Open a Tabbed Info Window on a Google™ Map Instance - Example

Step by step worked example of adding Google Maps™ API code to the Google-Maps-API-Basic-Map-Template.htm file to automatically open a Tabbed Info Window on a Google™ Map Instance.

Part 4 – Automatically Open a Tabbed Info Window on a Google™ Map Placemark

A detailed explanation of the Google Maps™ API code used to automatically open a Tabbed Info Window on a Google™ Map Placemark.

Part 5 – Automatically Open a Tabbed Info Window on a Google™ Map Placemark - Example

Step by step worked example of adding Google Maps™ API code to the Google-Maps-API-Basic-Map-Template.htm file to automatically open a Tabbed Info Window on a Google™ Map Placemark.

Downloads

Subscribers to this volume of tutorials can download the following source code: -

Google-Maps-API-Basic-Map-Template.htm
Google-Maps-API-Basic-Map-Template_MapInfoWindowTabbed.htm
Google-Maps-API-Basic-Map-Template_PlacemarkInfoWindowTabbed.htm

All source code files are valid XHTML 1.0 Strict.

Google Maps API

Wednesday, January 07, 2009

Advanced Tutorials » Google Maps API