Excelの位置情報からGoogle Mapを表示する。

Excelから位置情報を取得してブラウザを開き位置情報をWebGISに渡す手法を紹介しました。これらを組み合わせて,Excelの位置情報から地図を表示することができます。WebGISは,Google Map,Yahoo!地図,電子国土などありますが,まず単純にGoogle Mapを表示する手法です。

上記の例を実現するためには,最低限以下のものが必要になります。

  • 位置情報のデータ
  • 地図を表示させるイベント
  • そのイベントを実行するするためのインターフェース
  • 地図を表示するためのHTMLページ

xl2gmap1

今回の簡単な例ではそれぞれ以下のようにします。

  • 位置情報のデータをセル$A$2:$B$2へ記述したxlsmファイル
  • コマンドボタンCommandButton1のクリックイベントでブラウザを開く
  • コマンドボタンをワークシートSheet1に配置
  • GoogleMapを表示するHTMLページをサーバーに配置

まず,コマンドボタンの体裁としてボタンの表示(Caption,Fontなど)や配置(Left,Top,Hight,Widthなど)を適切に設定します。
次に,デザインモードで配置したコマンドボタンをダブルクリックすると,コマンドボタンのイベントを記述するVBEが開きます。デフォルトでClickイベントが用意されるので,その中にコードを書いていきます。

xl2gmap2

Book1.xlsmのSheet1のコード

〔11~12行目〕
サーバー上のファイルgmaptest1.htmlに経度・緯度をQuery Stringで渡すためのURL文字列を作成しています。

〔15~17行目〕
既定のブラウザで作成したURLを開きます。(詳細はこちらのページ

gmaptest1.htmlのコード

以下のように作成し,サーバーにアップロードします。

〔4行目〕
Google Maps JavaScript API V3を読み込んでいます。(詳細はこちらのAPIリファレンス)

〔5~10行目〕
マップ表示エリアの簡単なCSSを設定しています。

〔13行目〕
HTMLページ(body)内に地図を表示する範囲(div)を配置しています。先ほどcssでbodyのうちmarginを除いて100%の幅(width),高さ(height)が指定され,画面全体に地図を表示させています。

〔15~21行目〕
受け取ったQuery Stringを解析しています。(詳細はこちら

〔23行目〕
APIを用いて,地図を表示するためのクエリによる位置情報(オブジェクト)を作成しています。

〔24~29行目〕
地図を表示するためのオプションを設定しています。
 25行目:縮尺を設定
 26行目:上記の位置情報から地図の中心を設定
 27行目:左上にナビゲーションコントロールを表示
 28行目:地図のタイプを標準に設定

〔30行目〕
“map”というidの要素(今回はbody内のdiv)に設定したオプションで地図オブジェクトを作成し表示させています。

この簡単な例はこれで完成ですので,ワークシート上のコマンドボタンをクリックして実行すると,デフォルトブラウザ(この例ではChrome)で指定の座標を中心とした地図が表示されます。

xl2gmap3

関連記事