Google Maps のヘルパー・プラグイン

Google Maps ヘルパー・プラグインは、Google Maps API のサポートを提供します。このプラグインは、モバイル・デバイスまたはデスクトップ・コンピュータでの使用に適しています。Google Maps API の詳細は、https://developers.google.com/maps/documentation/javascript/Opens in a new tab を参照してください。

ページ・クラスへの Google Maps の追加

Google Maps API へのアクセス

このプラグインには、ダウンロードされたファイルは必要ありませんが、Google Maps API へのオンライン・アクセスが必要です。ページ・クラスの JSINCLUDES パラメータで、ローカル・ファイル名の代わりに以下の URL を追加します (“ページ・クラスへのプラグインの追加” を参照)。

  https://maps.googleapis.com/maps/api/js?sensor=true

Google Maps ヘルパー・プラグインの登録

以下の例は、Google Maps ヘルパーを pageContents XData ブロックで登録する方法を示しています (詳細は、“ページ・クラスへのプラグインの追加” を参照)。この例では、既定のページ・マネージャを使用しますが、どのページ・マネージャでも動作します。

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

Important:

onPageShow() が必要

使用されるページ・マネージャにかかわりなく、(この例に示されるように) onPageShow 属性を指定する必要があります。また、ウェブ・ページが正しく表示されるようにするために、onPageShow() を実装する必要があります。Google Maps プラグインの使用例は、“onPageShow() コールバックの実装” を参照してください。

Google Maps ヘルパー・プラグインは、他のページ・マネージャおよびヘルパー・プラグインと共に使用できます。既定のヘルパー・プラグインは、$map レイアウト・オブジェクトでのみ必要です。

その他のオプションおよび要件

$map レイアウト・オブジェクトには、既定のヘルパー・プラグインによって提供される $loop レイアウト・オブジェクトが必要です。既定のヘルパーが含まれていない場合、このレイアウト・オブジェクトは、予測される出力の代わりに文字列 "($loop)" を表示します。

このプラグインの詳細は、"クラス・リファレンス" の %ZEN.Mojo.Plugin.googleMaps3HelperOpens in a new tab を参照してください。

Note:

非推奨の Google Maps プラグイン・クラス

%ZEN.Mojo.Plugin.googleMapsHelperOpens in a new tab ヘルパー・プラグイン・クラスは、旧バージョンの Zen Mojo との下位互換性のために現在使用可能です。使用法は、古いクラスが以下の要素を使用して登録される点を除き、現在のプラグインと同じです。

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

この古いクラスは更新されず、今後のリリースで削除される予定です。

テンプレート・クラスでの Google Maps の使用

Google Maps レイアウト・オブジェクト

以下のリストは、Google Maps ヘルパー・プラグインで提供されるレイアウト・オプションのクイック・リファレンスとして使用できます。詳細なリファレンス情報については、プラグイン・ドキュメント・アプリケーションを使用してください (“プラグイン・ドキュメントおよびウィジェット・リファレンス・アプリケーションの使用” を参照)。

$map — マップを表します。既定のヘルパー・プラグインからの $loop が必要です。
$marker — マップ上のマーカを表します。
$directions — 2 つのマップ・ポイント間の方向を表します。
$infowindow — マップ上の情報ウィンドウを表します。既定のヘルパー・プラグインの $content レイアウト・オブジェクトを使用して、カスタム・テキスト・コンテンツを指定できます。HTML タグは、Google Maps API によって認識されます。

カスタム Google Maps レイアウト・オブジェクト・メソッド

以下のメソッドは、すべての適切なレイアウト・オブジェクト内で使用できます。

$refresh() — レイアウト・オブジェクトの HTML を再レンダリングします。すべての Google Maps レイアウト・オブジェクトを更新できます。

Google Maps ヘルパー・プラグイン・メソッド

Google Maps ユーティリティ・メソッドのリストについては、この章で後述する “カスタム Google Maps ヘルパー・プラグイン・メソッド” を参照してください。

Google Maps API への直接アクセス

このプラグインは、getGMap() メソッドを使用して、関連する Google Map オブジェクトを取得することにより、Google Maps API への直接アクセスを提供します (詳細は、以下のセクションの getGMap() エントリを参照)。

イベント処理

このプラグインには、特殊なイベント処理要件はありません。

カスタム Google Maps ヘルパー・プラグイン・メソッド

%ZEN.Mojo.Plugin.baseHelperPluginOpens in a new tab から継承されたメソッドに加えて、Google Maps ヘルパー・プラグインは以下のメソッドを提供します。

closeInfoWindow()
```
  ClientMethod closeInfoWindow(infoKey) [ Language = javascript ]
```
そのキーによって指定された情報ウィンドウを閉じます。
getGMap()
```
  ClientMethod getGMap() [ Language = javascript ]
```
現在のレベルの Google Map オブジェクトを返します。Google Maps API への直接アクセスは、返されるオブジェクトのメソッドおよびプロパティによって提供されます。マップ・オブジェクトが存在しない場合、null を返します。
getMarkers()
```
  ClientMethod getMarkers() [ Language = javascript ]
```
現在のアプリケーション・レベルで $marker オブジェクトの配列を返します。マップ・オブジェクトが存在しない場合、このメソッドは null を返します。
openInfoWindow()
```
  ClientMethod openInfoWindow(infoKey, markerKey) [ Language = javascript ]
```
そのキーによって指定された情報ウィンドウを開きます。マーカのキーも指定されている場合、そのマーカ上で情報ウィンドウが開きます。
refreshMap()
```
  ClientMethod refreshMap() [ Language = javascript ]
```
マップの更新イベントをトリガします。

resizeMap()

ClientMethod resizeMap() [ Language = javascript ]

マップのサイズ変更イベントをトリガします。以下に例を示します。

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

Note:

このプラグインには、ここにリストされていない他のユーティリティ・メソッドがさらにいくつかあります。詳細は、"クラス・リファレンス" の %ZEN.Mojo.Plugin.googleMaps3HelperOpens in a new tab を参照してください。

Google Maps プラグインのサンプル・コードの使用

Google Maps ヘルパー・プラグインが jQuery Mobile サンプル・アプリケーションに示されています。Studio で、SAMPLES ネームスペース内の　ZMdemo.JQM145　sに進みます。必要に応じて、そのパッケージ内のクラスをコンパイルします。アプリケーションを実行するには、ZMdemo.JQM145.HomePage を開き、[表示] → [ウェブページ] を選択します。

Web ページで、[...or jump directly] を選択してデモ・メニューを展開し、[Google Maps] デモを選択します。このデモを正常に実行するには、オンラインにする必要があります。

デバッグ・モードで実行している場合、必ずデバッグ対象 URL を csp/samples/ZMdemo.JQM145.HomePage.cls に設定してください。

また、このサンプル・アプリケーションでは、jQuery Mobile ページ・マネージャおよびヘルパー・プラグイン、HTML5 ヘルパー・プラグイン、既定のヘルパー・プラグインも使用します。