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 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 of Info Windows
Each map created using the Google Maps™ API can display content in a floating Info Window (Information Window) overlayed on the map. Typically the Info Window looks a little like a comic-book word balloon; it has a content area and a tapered stem, where the tip of the stem is “anchored” at a specified geographical point on the map or a geographical point on a placemark icon.
An Info Window object is automatically created when a map is created. By default the Info Window object is a Standard Info Window, it is closed and contains no content. Only one Info Window can be displayed at any given time on any given map. However, a new geographical point can be specified to “anchor” the Info Window object at a different location on the map and different content can be specified each time the Info Window is opened.
Within the Google Maps™ API there are two main types of Info Window that can be opened, a Standard Info Window and a Tabbed Info Window: -
When an Info Window is opened, the content can either be passed to the Info Window as a: -
HTML string
- openInfoWindowHTML()
- openInfoWindowTabsHtml()
or as a...
DOM (Document Object Model) object
- openInfoWindow()
- openInfoWindowTabs()
Notes
- The Info Window contents inherit the formatting from its parent container. For example, if the <div> containing the map is positioned with <center>, then the Info Window contents will also be centred.
- The code that calculates the size of an Info Window is executed before style inheritance takes place. If the Info Window contents subsequently inherit styles that change their size, for example font-size, then the Info Window may be too large/too small for the contents.
- If an image is placed into an info window, the height and width should always be specified so that the browser can calculate the size of the Info Window before starting to render the image.
- If a <table> or <div> is used inside an Info Window, the height and width of the <table> or <div> should also always be specified. Never use "width=100%" otherwise the browser will not be able to correctly calculate the size of the Info Window.
- If the HTML uses quotes, use single-quotes in the JavaScript string and double-quotes in the contained HTML
Automatically Open a Standard Info Window on a Google™ Map Instance
An Info Window can be “anchored” at a specified geographical point on a specific map instance (no placemark required). Info Windows can be automatically opened when a map loads or when an event such as a "click" or "mouse over" occurs.
To automatically open a standard Info Window “anchored” at a specified geographical point on a specific map instance when the map loads simply use the following two lines of code: -
The code explained: -
(i) Variable "Name" used to store the Geographical Point of the Info Window "anchor point".
(ii) Calculates a New Geographical Point based on the Latitude and Longitude Coordinates provided.
(iii) Variable "Name" of the map instance to which the Info Window should be added. (Refer: Volume 2 - Google Maps Template - Part 3 – Modify the Example Google Maps™ API Code).
(iv) Google Maps™ API method used to open a standard Info Window (containing HTML content) "anchored" to the map instance.
(v) Variable "Name" used to specify the Geographical Point on the map instance of the Info Window "anchor point".
(vi) Info Window contents, provided as a HTML string.
Note
- Substitute the “myMap” prefix with the name of the instance of your specific map.
- The Latitude and Longitude Coordinates (37.4419, -122.1419) used to create the new Geographical point are the same Latitude and Longitude Coordinates used to set the map center in the example code generated on completion of signing up for a Google Maps™ API key. Therefore, the Info Window will be anchored in the center of our example map.
- As a minimum an Info Window location or “anchor point”, in this case the Geographical point specified by the variable “myInfoWindowLocation”, must be provided as a parameter when adding an Info Window to a map instance.
Alternative Method
It is possible to remove the requirement to declare a variable (myInfoWindowLocation) and condense the two lines of code above into a single line of code: -
The code explained (Alternative Method): -
(i) Variable "Name" of the map instance to which the Info Window 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 open a standard Info Window (containing HTML content) on the map instance.
(iii) Calculates a New Geographical Point based on the Latitude and Longitude Coordinates provided. (Info Window Anchor Point)
(iv) Info Window contents, provided as a HTML string.
Automatically Open a Standard Info Window on a Google™ Map Instance - Example
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.
Note
If you did not complete the tutorial Volume 2 - Part 3 – Modify the Example Google Maps™ API Code or you did not save the Google-Maps-API-Basic-Map-Template.htm file, you can download the example code used below from the downloads <tab> of this tutorial.
(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_MapInfoWindow.htm
Notes
- The Google Maps™ API key in the example code is unique to http://www.websitelocationmaps.com. Your unique Google Maps™ API key will be different.
- If you did NOT use the Google-Maps-API-Basic-Map-Template.htm file as the basis for this example substitute the “myMap” prefix in the second line of code with the name of the instance of your specific map.
If you open and view the Google-Maps-API-Basic-Map-Template_MapInfoWindow.htm file in a web browser it should look similar to this: -
Automatically Open a Standard Info Window on a Google™ Map Placemark
An Info Window can be anchored to a "named" placemark icon. An Info Window can be automatically opened when a placemark is overlayed on a map or when an event such as a "click" or "mouse over" occurs.
To automatically open a standard Info Window anchored to a "named" placemark icon (based on the default placemark icon 
(G_DEFAULT_ICON)) simply use the following three 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.
(vii) Variable "Name" of the placemark to which the Info Window should be "anchored"
(viii) Google Maps™ API method used to open a standard Info Window (containing HTML content) "anchored" to the "named" placemark.
(ix) Info Window contents, provided as a HTML string.
Notes
- If required, substitute the “myMap” prefix with the name of the instance of your specific map.
- The Latitude and Longitude Coordinates (37.4419, -122.1419) used to create the new Geographical point are the same Latitude and Longitude Coordinates used to set the map center in the example code generated on completion of signing up for a Google Maps™ API key. Therefore, the new placemark will be positioned in the center of our example map.
- Each Placemark Icon (EG: the default placemark icon (G_DEFAULT_ICON) ) has a property “.infoWindowAnchor”. It is this property that specifies the geographical point on the placemark Icon to “anchor” the Info Window to the specific placemark. Typically the Info Window is “anchored” to the top-center of the placemark icon, in this case “myPlacemark”. Therefore, only the HTML content to be displayed in the Info Window is supplied as a parameter when opening the Info Window anchored to a "named" placemark.
Automatically Open a Standard Info Window on a Google™ Map Placemark - Example
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.
Note
If you did not complete the tutorial Volume 2 - Part 3 – Modify the Example Google Maps™ API Code or you did not save the Google-Maps-API-Basic-Map-Template.htm file, you can download the example code used below from the downloads <tab> of this tutorial.
(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_PlacemarkInfoWindow.htm
Notes
- The Google Maps™ API key in the example code is unique to http://www.websitelocationmaps.com. Your unique Google Maps™ API key will be different.
- If you did NOT use the Google-Maps-API-Basic-Map-Template.htm file as the basis for this example substitute the “myMap” prefix in the second line of code with the name of the instance of your specific map.
If you open and view the Google-Maps-API-Basic-Map-Template_PlacemarkInfoWindow.htm file in a web browser it should look similar to this: -