More advanced stuff

Google Maps API Tutorial

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.

Options

The possible entries in the googleBarOptions are:

property type purpose
showOnLoad bool If true, the Google Bar will be expanded when the map has loaded.
linkTarget string Use 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
resultList string Use one of these string variables to control result list suppression G_GOOGLEBAR_RESULT_LIST_INLINE, G_GOOGLEBAR_RESULT_LIST_SUPPRESS
suppressInitialResultSelection bool If true, the info window is not opened on the first result.
suppressZoomToBounds bool If true, the map does not zoom and pan to fit the results.
onIdleCallback function Function be be called when the GoogleBar finishes searching
onSearchCompleteCallback function Function to be called when the search is complete, before the reults are plotted
onMarkersSetCallback function Function to be called after the markers have been placed on the map.
onGenerateMarkerHtmlCallback function Function 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:

onIdleCallback

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.

onSearchCompleteCallback

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.

onMarkersSetCallback

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.

onGenerateMarkerHtmlCallback

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.

Advertisements