Google Mapの利用 -(2)マップツールの設定- LUNARAVE WEBクリエーターの仕事と休息/ウェブリブログ

Google Mapの利用 -(2)マップツールの設定-

<< 作成日時： 2007/02/13 12:39 >>

トラックバック 0 / コメント 0

先日より試験的に使っている"Google Map"だが、サンプルコードを使うと海外が表示されたうえに、拡大縮小ボタンがなく非常に使いにくい。

　サンプルマップ

まず、地図自体の大きさを変更する。
この箇所はHTMLに表記されているのでこの数値を変更するだけでよい。

<body onload="load()" onunload="GUnload()">
　<div id="map" style="width: 500px; height: 300px"></div>
</body>

↓

<body onload="load()" onunload="GUnload()">
　<div id="map" style="width: 600px; height: 600px"></div>
</body>

次に拡大縮小やスライダー、航空写真・地図の切り替えボタンをつけてみることにした。

<script type="text/javascript">
//<![CDATA[
function load() {
　if (GBrowserIsCompatible()) {
　　var map = new GMap2(document.getElementById("map"));
　　map.setCenter(new GLatLng(37.4419, -122.1419), 13);
　}
}
//]]>
</script>

　↓

<script type="text/javascript">
//<![CDATA[
function load() {
　if (GBrowserIsCompatible()) {
　　var map = new GMap2(document.getElementById("map"));
　　map.setCenter(new GLatLng(37.4419, -122.1419), 13);
　　map.addControl(new GLargeMapControl());　//上下左右の移動ボタンと拡大・縮小スライダーを表示
　　map.addControl(new GMapTypeControl());　//航空写真・地図の切り替えボタンを表示
　}
}
//]]>
</script>

上記で拡大・縮小スライダーに"GLargeMapControl()"を指定しているが、これがGoogle Mapの関数となるようだ。

ちなみに"GSmallZoomControl()"で拡大・縮小ボタンだけを表示、"GSmallMapControl()"で上下左右の移動ボタンと拡大・縮小ボタンが表示されるようだ。

Google Mapの関数もバージョンがあるようで、同じ機能でも古いバージョンの方は記述方法が異なるようだ。