2014-05-31

[SAPUI5/OpenUI5]GoogleMapと組み合わせる

SAPUI5/OpenUI5を使った場合、SAPのバックエンドのデータと、様々なオープンデータやWebサービスを組み合わせてクライアントマッシュアップさせたくなります。
(今回はOpenUI5を使いました。)

まず定番はGoogleMapでしょうか・・・
普通にPageにMapを表示するサンプルは探せばあるのですが、ダイアログでMapを表示するサンプルが無かったので作ってみました。

サンプルはこちらです。

「Open Map」ボタンを押すと東京駅を中心としたマップが表示されます。

SAPUI5/OpenUI5 Google map Sample

  1. 説明
  2. 最後に

1. 説明

基本的には、OpenUI5のindex.htmlにGoogleMapのAPIを利用するためにJavascriptを読み込むだけで準備はOKです。

次に、ダイアログを作成します。

以下、ダイアログを作成する際に初期設定でなにを行っているかの説明です。

  • content
    • GoogleMapを表示させるコンテナを作成します。ここではsap.ui.core.HTMLを使って直接<div>タグを出力しています。
  • beginButton
    • 閉じるボタンの処理です。
  • afterOpen
    • ダイアログが表示された後にMapを初期化して、座標をプロットしています。

Map初期化のタイミングですが、MapコンテナのDOMが生成される前に初期化するとエラーになるので注意が必要です。
ちょっとしたら、MapコンテナのafterRenderingイベントでも初期化できるかもしれません(未検証)。そっちの方が作りとしては奇麗な気がします。

2. 最後に

今後、企業の社員にタブレットなどのモバイル端末を配布して、外での業務活動に活かすケースはますます増えると思います。
GoogleMapとの連携はよくありそうなシーンなのですが、他のWebサービスや既存の社内システムの情報などをマッシュアップすることで、変化の激しい時代に適応した、モバイルを有効活用したまったく新しい企業システムが誕生するのかと思うと、少しわくわくします。

以下、参考情報です。

OpenUI5API

GoogleMap関連

GoogleMapの使い方についてはこちらが丁寧です。
(AjaxTowerさん、毎度ありがとうございます!)

GoogleMapのAPIのスタートガイド(公式)

SAPUI5/OpenUI5とGoogleMapのサンプル