スポンサードリンク

地図の拡大・縮小用のクリックボタン(アイコン)を地図の外に設置&現在の地図のズームレベルをインフォウィンドウ(infowindow)に表示する。


◆ 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

スポンサードリンク

Related Posts

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">