Using Zen Mojo Plugins
Helper Plugin for Google Maps
[Home] [Back] [Next]
InterSystems: The power behind what matters   
Class Reference   
Search:    

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/.

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.googleMaps3Helper in the class reference.
Note:
Deprecated Google Maps Plugin Class
The %ZEN.Mojo.Plugin.googleMapsHelper 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):
Custom Google Maps Layout Object Methods
The following method is available within all appropriate layout objects:
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.baseHelperPlugin, the Google Maps helper plugin provides the following methods:
Note:
This plugin also has several other utility methods not listed here. See %ZEN.Mojo.Plugin.googleMaps3Helper 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.