◆ Google Maps API v3 /ズームレベルを変更するためのボタンを地図の外部に設置する。
通常、地図のズームレベルは、マウスホイールを回転させれば、それでOKだが、iPhone（アイフォン）等スマートフォンでは、それが出来ない。希望のズームレベルへ変更したいものだ。
それなら、マップの外にズーム用のボタンを設置する案しか無いかな・・・。
ズーム関係で、使う要素は、ズームレベルを指定するための、setZoom()。それと現在のズームレベルを得るための、getZoom()。おまけで、ズームレベルが変更になったことを捕まえるためのマップイベント用ハンドラgoogle.maps.event.addListener(map, ‘zoom_changed’, function()の3つ。
（1）ズームレベルを指定する
ズームレベルを指定するscriptは、次のこれだけ。ズームレベルをしてするのは「setZoom」。それに初期座標からずれないようにpantToを追加したもの。
function setzoom(n)
{
map.setZoom(n);
map.panTo(myLatlng);//◆インフォウィンドウを地図の中心に移動する。
}
うんで、地図の外側に拡大・縮小用のズームボタンを設置して、上記のfunction setzoomを動かしてやればよい。
（A）inputボタンを使う案
<input type="button" value="ズームレベル6" onclick="setzoom(6)" /> <input type="button" value="ズームレベル10" onclick="setzoom(10) " /> <input type="button" value="ズームレベル15" onclick="setzoom(15) " /> <input type="button" value="ズームレベル20" onclick="setzoom(20) " /> <input type="button" value="ズームレベル-" onclick="setzoom(map.getZoom()-1) " /> <input type="button" value="ズームレベル+" onclick="setzoom(map.getZoom()+1) " />
（B）リンクボタンを使う案
<a href="javascript:map.setZoom(6);">ズームレベル6</a> <a href="javascript:map.setZoom(10);">ズームレベル10</a> <a href="javascript:map.setZoom(15);">ズームレベル15</a> <a href="javascript:map.setZoom(20);">ズームレベル20</a> <a href="javascript:map.setZoom(map.getZoom()-1);">(-)</a> <a href="javascript:map.setZoom(map.getZoom()+1);">(+)</a>
（C）画像（gif等）を使う案
<img src="maps/gif/zoom_in_32x32.png" width="32" height="32" border="0" onclick="setzoom(map.getZoom()+1)"/> <img src="maps/gif/zoom_out_32x32.png" width="32" height="32" border="0" onclick="setzoom(map.getZoom()-1)"/>
（2）現在のズームレベルを表示する。
一方、現在のズームレベルを得るのにつかうのは「getZoom」。せっかくzoom関係を整理していたので、ズームレベルを入手するイベントハンドラは、zoom_changedを使うことにする。なお、地図の初期表示にズームイベントは発生しないので、projection_changedも設定。
google.maps.event.addListener(map, 'projection_changed', function() //◆地図のズームレベル変更時
{
var zoom = map.getZoom();
zoomlevel.innerHTML = '現在のズームレベルは、「 ' + zoom + ' 」です。';
});
google.maps.event.addListener(map, 'zoom_changed', function() //◆地図のズームレベル変更時
{
var zoom = map.getZoom();
zoomlevel.innerHTML = '現在のズームレベルは、「 ' + zoom + ' 」です。';
map.panTo(myLatlng);//◆インフォウィンドウを地図の中心に移動する。
});
getZoomで得た変数zoomを、innerHTMLで<div id=”zoomlevel”></div>へ表示させます。
おまけでインフォウィンドウにも表示させてみます。
（3）インフォウィンドウ（infowindow）にzoomレベルを表示させる。
グローバル変数に「var infoWindow;」を指定。
zoomレベルをj表示させるscriptを新たに作成します。
function zoomlevelWindow()
{
var zoom = map.getZoom();
var contentString = '現在のズームレベルは、「 ' + zoom + ' 」です。';
infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(contentString);
infoWindow.setPosition(myLatlng);
infoWindow.open(map);
}
・・・・うんで、この新たに作ったzoomlevelwindow（）を、上記のイべントハンドラの中に追加すれば、拡大・縮小の度に、このscriptを読み込んでインフォウィンドウにズームレベルを表示することが出来ます。
google.maps.event.addListener(map, 'projection_changed', function() { var zoom = map.getZoom(); zoomlevel.innerHTML = '現在のズームレベルは、「 ' + zoom + ' 」です。'; zoomlevelWindow();//◆インフォウィンドウを表示するscriptを追加。 }); google.maps.event.addListener(map, 'zoom_changed', function() { var zoom = map.getZoom(); zoomlevel.innerHTML = '現在のズームレベルは、「 ' + zoom + ' 」です。'; zoomlevelWindow();//◆インフォウィンドウを表示するscriptを追加。 map.panTo(myLatlng); });◆ Google Maps API v3 ズームレベル関係を表示するサンプルデモ
出来上がったマップのソースで上記確認ください。
◆Google Maps JavaScript API V3
関連記事一覧
ズームレベルに連動しマーカー収得用の半径距離（km）を自動変更して、地図のアイコン表示範囲内（Viewport）に合わせてみる＋サイドバー- event Listenerイベントリスナーで地図（マップ）イベントによりデータベースから都度マーカーを読み込むphp+MySQL
地図のズームレベル(zoom level)を取り出す。条件分岐式 if文 if() else if() else()と条件式switch
Google Maps API V3の地図（マップ）をPC、スマートフォンで見れるように表示させるscriptとメタタグの設定
Google Map現在地アイコン／レーダのようにパルス発信するアニメーション
全てのブラウザに対応したcssスタイルシートの透明、半透明の背景設定を記述する
インフォウィンドウ（吹き出し）の外部サイトへのリンクURLの記述／iPhoneサイトをjQTouchで作成する。
ストリートビュー地図（マップコネクト）の外にペグマンの表示位置を切り替えるボタンを設置する
スポンサードリンク
1 Comments.