Google Maps™ API Tutorials - Volume 2 - Create a Google Maps™ Template

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 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.

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.

To display a notification message: -

(a) – Open the file you saved containing the example code generated on completion of signing up for your unique Google Maps™ API key (Refer: Volume 1 - Part 2 – Sign Up for a Google Maps™ API Key) in a text editor such as Notepad and locate the function load() section of code.

(b) Insert the additional yellow highlighted lines of code.

(c) Select “Save As...” from the File menu in Notepad to save the updated file as Google-Maps-API-Basic-Map-Template.htm

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.

To check that JavaScript is enabled and if not display a notification message: -

(a) Open your Google-Maps-API-Basic-Map-Template.htm file (Refer: Volume 2 - Part 1 – Browser Compatibility – Display Notification Message) in a text editor such as Notepad and locate the <body></body> section of code.

(b) Insert the additional yellow highlighted lines of code.

(c) Select “Save” from the File menu in Notepad to save the updated file Google-Maps-API-Basic-Map-Template.htm

Modify the Example Google Maps™ API Code

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.

(a) - Open the updated Google-Maps-API-Basic-Map-Template.htm file (Refer: Volume 2 - Part 2 – Check JavaScript Enabled and Display Notification Message) in a text editor such as Notepad and locate the function load() section of code.

(b) - Edit the highlighted code.

(c) - Locate the <body></body> section of code.

(d) - Edit the highlighted code.

(e) Select “Save” from the File menu in Notepad to save the updated file Google-Maps-API-Basic-Map-Template.htm