ASP.NETサイトにGoogle Mapsの地図を表示する（3）

なおさん

15年前

前回の記事で、WebサイトにGoogle Mapsの地図を表示させるための下準備として、APIキーを取得するところまで書いてみました。今回は、そのキーを使用して、実際に地図を表示させてみましょう。単に表示させるだけなら、面倒なことはありません。

必要なのは、地図を表示させたいページにScriptManagerコンポーネントを組み込み、ScriptManagerProxyコンポーネントを組み込み、ページロード時に実行するスクリプトを書くだけです。順番に行ってみましょう。

マスターページを使わない単純な構造で行きましょう。たとえば、Default.aspxに、ScriptManagerコンポーネントを配置します。これは、配置するだけです。マスターページを使う場合には、ContentsPlaceHolderコンポーネントの前に配置します。

次に、ScriptManagerProxyコンポーネントを組み込みます。このコンポーネントに、Google MapsのAPIキーを含むハイパーリンクを設定します。このコンポーネントのScriptReference要素のPath属性にハイパーリンクを設定します。これで、Google Mapsに必要なライブラリが読み込まれます。ScriptManagerProxyコンポーネントにはWebServiceに関する要素もありますが、今回は使用しません。

そして、<body>要素のonload属性に、呼び出すJavaScript関数を指定します。

さらにさらに、地図を表示したい部分に、<div>要素を加えます。通常、地図の表示には、<div>要素を使用します。id属性は重要で、このmapsというIDで、JavaScriptから参照します。幅と高さも指定しています。

最後に、init()の実体を記述します。上記のinit()を、新たな関数init2()に置き換える書き方です。

<script type="text/javascript"> //<![CDATA[ var map;

こんな感じです。緯度と経度には、適当な場所の数値を入れて下さい。

どうでしょう？地図が出ましたか？地図が出れば、バルーンもあるはずなので、そこをクリックすると、「Here!」と書かれたポップアップが出るはずです。

このように、地図を単に出すだけなら意外と簡単です。ですが、地図の左表をプログラム中から指定するには、どうしたらよいのでしょう？また、動的に地図を作成したい場合は？次回は、こんなところに触れていきましょう。

init = function init2() {
if (GBrowserIsCompatible()) {
   if ($get(‘maps’) != null) {
      map = new GMap2($get(‘maps’));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.clearOverlays();
      var pnt = new GLatLng(緯度, 経度);
      var mrk = new GMarker(pnt);
      map.addOverlay(mrk);
      map.setCenter(pnt, 12);
      map.setMapType(G_NORMAL_MAP);
      var msg = "Here!";
      GEvent.addListener(mrk, ‘click’,
　       function() { mrk.openInfoWindowHtml(msg); }
      );
   }
}
}
//]]>
</script>