LUNARAVE WEBクリエイターの仕事と休息

アクセスカウンタ

Google Maps APIの利用戦国IXAWeb技術Youtubeチャンネル

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

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

ブログ気持玉 0 / トラックバック 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の関数もバージョンがあるようで、同じ機能でも古いバージョンの方は記述方法が異なるようだ。


テーマ

注目テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
Google Mapの利用 -(2)マップツールの設定- LUNARAVE WEBクリエイターの仕事と休息/BIGLOBEウェブリブログ
文字サイズ:       閉じる