Skip to main content

Helper Plugin for Google Maps

The Google Maps helper plugin provides support for the Google Maps API. This plugin is suitable for use on mobile devices or on desktop computers. For detailed information about the Google Maps API, see https://developers.google.com/maps/documentation/javascript/Opens in a new tab.

Adding Google Maps to the Page Class

Accessing the Google Maps API

This plugin does not require any downloaded files, but it must have online access to the Google Maps API. In the JSINCLUDES parameter of your page class, add the following URL in place of a local filename (see “Adding Plugins to the Page Class”):

  https://maps.googleapis.com/maps/api/js?sensor=true
Registering the Google Maps Helper Plugin

The following example demonstrates how the Google Maps helper can be registered in your pageContents XData block (as described in “Adding Plugins to the Page Class”). This example uses the Default page manager, but any page manager will work:

  <mojo:mojoDefaultPageManager onPageShow="zenPage.onPageShow(key);">
    <mojo:googleMaps-3-Helper/>
    <mojo:mojoDefaultHelper/>
  </mojo:mojoDefaultPageManager>

Important:
onPageShow() is Required

Regardless of the page manager used, the onPageShow attribute must be specified (as shown in this example) and onPageShow() must be implemented to ensure that the web page is properly displayed. See “Implementing the onPageShow() Callback” for an example that uses the Google Maps plugin.

The Google Maps helper plugin can be used with other page manager and helper plugins. The Default helper plugin is required only by the $map layout object.

Other Options and Requirements

The $map layout object requires the $loop layout object provided by the Default helper plugin. This layout object will display the string "($loop)" in place of the expected output if the Default helper is not included.

For more information on this plugin, see %ZEN.Mojo.Plugin.googleMaps3HelperOpens in a new tab in the class reference.

Note:
Deprecated Google Maps Plugin Class

The %ZEN.Mojo.Plugin.googleMapsHelperOpens in a new tab helper plugin class is currently available for backward compatibility with earlier versions of Zen Mojo. Usage is identical to the current plugin except that the older class is registered using the following elements:

  <mojo:mojoDefaultPageManager onPageShow="zenPage.onPageShow(key);">
    <mojo:googleMapsHelper/>
    <mojo:mojoDefaultHelper/>
  </mojo:mojoDefaultPageManager>

This older class is not being updated and will be removed in a later release.

Using Google Maps in a Template Class

Google Maps Layout Objects

The following list is intended as a quick reference to the layout options offered by the Google Maps helper plugin. For complete reference information, use the Plugin Documentation app (see “Using the Plugin Documentation and Widget Reference Apps”):

  • $map — represents a map. Requires $loop from the Default helper plugin.

  • $marker — represents a marker on a map.

  • $directions — represents directions between two map points.

  • $infowindow — represents an info window on a map. The Default helper plugin’s $content layout object can be used to specify custom text content. HTML tags are recognized by the Google Maps API.

Custom Google Maps Layout Object Methods

The following method is available within all appropriate layout objects:

  • $refresh() — Re-renders the HTML for the layout object. All Google Maps layout objects can be refreshed.

Google Maps Helper Plugin Methods

See “Custom Google Maps Helper Plugin Methods” later in this chapter for a list of Google Maps utility methods.

Direct Access to the Google Maps API

This plugin provides direct access to the Google Maps API by using the getGMap() method to get the associated Google Map object (see the getGMap() entry in the following section for details).

Event Handling

This plugin has no special event handling requirements.

Custom Google Maps Helper Plugin Methods

In addition to methods inherited from %ZEN.Mojo.Plugin.baseHelperPluginOpens in a new tab, the Google Maps helper plugin provides the following methods:

  • closeInfoWindow()

      ClientMethod closeInfoWindow(infoKey) [ Language = javascript ]
    

    Closes an info window specified by its key.

  • getGMap()

      ClientMethod getGMap() [ Language = javascript ]
    

    Returns the Google Map object of the current level. Direct access to the Google Maps API is provided by the methods and properties of the returned object. Returns null if the map object does not exist.

  • getMarkers()

      ClientMethod getMarkers() [ Language = javascript ]
    

    Returns an array of the $marker objects on the current level of the application. If the map object does not exist, this method returns null.

  • openInfoWindow()

      ClientMethod openInfoWindow(infoKey, markerKey) [ Language = javascript ]
    

    Opens an info window specified by its key. If the key of a marker is specified as well, the info window will open on that marker.

  • refreshMap()

      ClientMethod refreshMap() [ Language = javascript ]
    

    Triggers the refresh event for the map.

  • resizeMap()

    ClientMethod resizeMap() [ Language = javascript ]
    

    Triggers the resize event for the map. For example:

      var map = zen('mainView').getPluginByLayoutObjectType('$map');
      map.resizeMap();
    
Note:

This plugin also has several other utility methods not listed here. See %ZEN.Mojo.Plugin.googleMaps3HelperOpens in a new tab in the class reference for details.

Using Google Maps Plugin Sample Code

The Google Maps helper plugin is demonstrated in the jQuery Mobile sample application. In Studio, go to ZMdemo.JQM145 in the SAMPLES namespace. Compile the classes in that package if necessary. To run the application, open ZMdemo.JQM145.HomePage and select View > Web Page.

On the web page, select ...or jump directly to expand the demo menu, and select the Google Maps demo. You must be online to run this demo successfully.

When running in debug mode, remember to set the debug target URL to csp/samples/ZMdemo.JQM145.HomePage.cls.

This sample application also uses the jQuery Mobile page manager and helper plugins, the HTML5 helper plugin, and Default helper plugin.

FeedbackOpens in a new tab