Google Maps API Tutorial

© 2008, 2009 Mike Williams

Translate this page:


GoogleBar Options

The GoogleBar allows you to achieve similar functionality to what you would get by using the Google AJAX Search API to perform a Local Search, but provides a few advantages:
  1. If you just need the basic functionality, all you need is one extra command in your code: map.enableGoogleBar().
  2. You can use it without having agreed to the Google AJAX Search API Terms of Use, which seem to not allow you to modify the results.
The Maps API GoogleBar options provide facilities which you can use to:
  • Modify or replace the text, images, or other content of the Google Search Results
  • Changing the order in which the Google Search Results appear
  • Intermix Search Results from sources other than Google
  • Intermix other content such that it appears to be part of the Google Search Results
  • Modify, replace or otherwise disable the functioning of links
All of which would be prohibited if you were using the Google AJAX Search API.


The possible entries in the googleBarOptions are:
showOnLoadboolIf true, the Google Bar will be expanded when the map has loaded.
linkTargetstringUse one of these string variables to control the link target pane G_GOOGLEBAR_LINK_TARGET_BLANK, G_GOOGLEBAR_LINK_TARGET_PARENT, G_GOOGLEBAR_LINK_TARGET_SELF, G_GOOGLEBAR_LINK_TARGET_TOP
resultListstringUse one of these string variables to control result list suppression G_GOOGLEBAR_RESULT_LIST_INLINE, G_GOOGLEBAR_RESULT_LIST_SUPPRESS
suppressInitialResultSelectionboolIf true, the info window is not opened on the first result.
suppressZoomToBoundsboolIf true, the map does not zoom and pan to fit the results.
onIdleCallbackfunctionFunction be be called when the GoogleBar finishes searching
onSearchCompleteCallbackfunctionFunction to be called when the search is complete, before the reults are plotted
onMarkersSetCallbackfunctionFunction to be called after the markers have been placed on the map.
onGenerateMarkerHtmlCallbackfunctionFunction to be called when the info window is about to be opened on one of the results. Must return the (modified) html element object to be used for the info window contents.

The first six options are fairly straight forward, but the callback functions need a bit of explanation:


This function is called when the GoogleBar is opened for the first time, and called again whenever the previous results are cleared. It is not called if a second search is executed without the user explicitly clearing the previous results.

No parameters are passed.


This function is called when the search is complete, before the results are plotted.

There is one parameter, a reference to a GlocalSearch object, see Official Class reference

Of particular interest is the .results[] array, which is an array of GlocalResult() objects, see Official Class reference

You can read that information, but also, because it's a reference, you can modify the contents of the .result[] array. The .html will have already been calculated, so changing things like the .results[i].city won't affect what gets displayed in the info window.

If you want to change the info window contents at this point, then you need to change the .results[i].html.innerHTML.


This function is called when the API has created markers corresponding to the search results.

There is one parameter, an array of anonymous Objects.
Each Object in the array has two properties, .result is a GlocalResult object and .marker is a GMarker.


This function is called whenever an info window is about to be opened.

The parameters are:

  1. The GMarker
  2. The HTMLElement which is intended to become the info window contents
  3. The GlocalResult
The function must return a HTMLElement which will become the actual info window contents.

Simple result filtering example

This example uses onSearchCompleteCallback to filter the search results, reducing the number of results to no more than two.

Simple info window modification

This example uses onGenerateMarkerHtmlCallback to read information from the GMarker and from the GlocalResult to modify the contents of the info window at the time that the info window is opened.

Advanced example: add ELabels

This advanced example uses all the GoogleBar Options. It displays an Elabel alongside each marker, and in order to do that it uses the callback functions like this:

onIdleCallback uses map.clearOverlays() to remove the old ELabels

onSearchCompleteCallback uses map.clearOverlays() to remove the old ELabels

onMarkersSetCallback reads the location of each GMarker and the titleNoFormatting of each GlocalResult and uses that information to create an ELabel.

onGenerateMarkerHtmlCallback hides the ELabel corresponding to the marker on which the info window is opening.

Back to Mike's Homepage
Up to the start of this tutorial