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

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

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

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

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

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

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

Book1.xlsmのSheet1のコード

Option Explicit

Private Sub CommandButton1_Click()

    Dim lon As Single, lat As Single, URL As String, WSH As Variant
     
    'セルから緯度・経度を取得
    lon = Range("B2"): lat = Range("A2")
     
    '経度・緯度を検索クエリとしたURLを指定する
    URL = "http://xl.hisholy.net/test/gmaptest1.html?lon=" & _
                CStr(lon) & "&lat=" & CStr(lat)
     
    'WSHを用いてデフォルトブラウザでURLを開く。
    Set WSH = CreateObject("Wscript.Shell")
    WSH.Run URL, 3
    Set WSH = Nothing
 
End Sub

Option Explicit

Private Sub CommandButton1_Click()

Dim lon As Single, lat As Single, URL As String, WSH As Variant

'セルから緯度・経度を取得

lon = Range("B2"): lat = Range("A2")

'経度・緯度を検索クエリとしたURLを指定する

URL = "http://xl.hisholy.net/test/gmaptest1.html?lon=" & _

CStr(lon) & "&lat=" & CStr(lat)

'WSHを用いてデフォルトブラウザでURLを開く。

Set WSH = CreateObject("Wscript.Shell")

WSH.Run URL, 3

Set WSH = Nothing

End Sub

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

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

gmaptest1.htmlのコード

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

<html lang="ja">
<head>
	<meta charset="utf-8">
	<script src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>
	<style>
		#map{
			width:100%;
			height:100%;
		}
	</style>
</head>
<body>
	<div id="map"></div>
	<script>
		var QS = new Array;
		if (location.search.length > 1) {
		　var m_Array = location.search.substr(1).split("&"); 
		　for (idx in m_Array) {
		　　QS.push(m_Array[idx].split("="));
		　}
		}

		var latlon=new google.maps.LatLng(QS[1][1],QS[0][1]);
		var options={
			zoom:15,
			center:latlon,
			navigationControl:true,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var map=new google.maps.Map(document.getElementById('map'),options);

	</script>
</body>
</html>

<head>

<style>

#map{

width:100%;

height:100%;

}

</style>

</head>

<body>

var QS = new Array;

if (location.search.length > 1) {

　var m_Array = location.search.substr(1).split("&");

　for (idx in m_Array) {

　　QS.push(m_Array[idx].split("="));

　}

var latlon=new google.maps.LatLng(QS[1][1],QS[0][1]);

var options={

zoom:15,

center:latlon,

navigationControl:true,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map=new google.maps.Map(document.getElementById('map'),options);

</script>

</body>

</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）で指定の座標を中心とした地図が表示されます。

Book1.xlsmのSheet1のコード

gmaptest1.htmlのコード

関連記事

共有: