Google Maps™ API Tutorials - Volume 4 - Add Placemarks (Markers)

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

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 a "named" placemark on our Google™ Map.

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.

Add a Placemark (Marker) to a Google™ Map

(1) Add a single “un-named” Placemark to a map

To add a single “un-named” Placemark, based on the default placemark icon  (G_DEFAULT_ICON), to a map simply use the following line of code: -

The code explained: -

(i) Variable "Name" of the map instance to which the placemark should be added. (Refer: Volume 2 - Google Maps Template -  Part 3 – Modify the Example Google Maps™ API Code)

(ii) Google Maps™ API method used to add the placemark as an overlay on the map instance.

(iii) Calculates a New Geographical Point based on the Latitude and Longitude Coordinates provided.

(iv) Creates a new Placemark object (GMarker) whose location on the map is specified by the new Geographic Point.

(2) Add a single “named” Placemark to a map

In most circumstances you would want to create a "named" placemark by which the placemark could subsequently be referenced by other parts of your Google Maps™ API code.

To add a single “named” Placemark, based on the default placemark icon  (G_DEFAULT_ICON), to a map simply use the following two lines of code: -

The code explained: -

(i) Variable "Name" of the placemark

(ii) Calculates a New Geographical Point based on the Latitude and Longitude Coordinates provided.

(iii) Creates a new Placemark object (GMarker) whose location on the map is specified by the new Geographic Point.

(iv) Variable "Name" of the map instance to which the placemark should be added. (Refer: Volume 2 - Google Maps Template -  Part 3 – Modify the Example Google Maps™ API Code)

(v) Google Maps™ API method used to add the placemark as an overlay on the map instance.

(vi) "Name" of the placemark to add as an overlay.

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

Multiple placemarks can be added to any given map. However, for simplicity  in this example we will add only a single "named" placemark.

The Google-Maps-API-Basic-Map-Template.htm file (Refer:  Volume 2 - Google Maps Template - Part 3 – Modify the Example Google Maps™ API Code) is used as the starting point for this example.

(a) - Open the Google-Maps-API-Basic-Map-Template.htm file in a text editor such as Notepad.

(b) Locate the “function initializeMyMap()” section of code.

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

(d) Select “Save As..." from the File menu in Notepad to save the file as Google-Maps-API-Basic-Map-Template_Placemarks.htm

If you open and view the Google-Maps-API-Basic-Map-Template_Placemarks.htm file in a web browser it should look similar to this: -