On "mouseover" Event : 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 (Refer: Volume 5 - Standard Info Windows) or when an event such as a "click" or "mouseover" occurs.
To open a standard Info Window “anchored” at a specified geographical point on a specific map instance when the mouse cursor moves over the map (mouseover) 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) Google Maps™ API method used to add an event listener to a "source object".
(iv) Event Source Object : Variable "Name" of the map instance.
(v) Type of Event being "listened" for.
Action (function) to be performed when the event being listened for is triggered.
(vi) 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).
(vii) Google Maps™ API method used to open a standard Info Window (containing HTML content) "anchored" to the map instance.
(viii) Variable "Name" used to specify the Geographical Point on the map instance of the Info Window "anchor point".
(ix) 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.
On "mouseover" Event : 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_MapInfoWindowMouseOver.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_MapInfoWindowMouseOver.htm file in a web browser it should look similar to this: -
On "click" Event : Open a Tabbed 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 open a tabbed Info Window anchored to a "named" placemark icon (based on the default placemark icon 
(G_DEFAULT_ICON)) when the placemark icon is clicked with the left mouse button 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) Google Maps™ API method used to add an event listener to a "source object".
(viii) Event Source Object : Variable "Name" of the placemark.
(ix) Type of Event being "listened" for.
Action (function) to be performed when the event being listened for is triggered.
(x) Variable "Name" of the placemark to which the tabbed Info Window should be "anchored"
(xi) Google Maps™ API method used to open a tabbed Info Window (containing HTML content) "anchored" to the "named" placemark.
(xii) Google Maps™ API class used to declare a new tab (info window) instance
(xiii) Tab Info Window Label
(xiv) Tab 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 tabbed 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.
On "click" Event : Open a Tabbed 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_PlacemarkInfoWindowTabbedClick.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_PlacemarkInfoWindowTabbedClick.htm file in a web browser it should look similar to this: -