Google Map api v3 スクロールでの拡大縮小の無効やドラッグの無効等の実施方法

どうもこんにちは。Toshikuraです。今回のTipsは【Google Map api v3 スクロールでの拡大縮小の無効やドラッグの無効等の実施方法】です。Googleマップをウィンドウ幅に合わて使う際、地味に困るのがスクロールで地図が反応してしまう事です。今回はマウススクロールでの反応を禁止する方法〜その他たまに禁止させる項目をまとめておきます。

実装方法

マウススクロールでの拡大縮小を無効化

実装方法はmapOptionsの指定に禁止したい項目を追加するだけと至ってシンプルです。マウススクロールの禁止は【scrollwheel: false,】にて実装されています。
　

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window,'load',function(){
	var mapOptions = {
		zoom: 12,
		center: new google.maps.LatLng(35.689488,139.691706),
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		scrollwheel: false
	};
	var mp = new google.maps.Map(document.getElementById('map'), mapOptions);
});
</script>
<div id="map" style="width:100%; height: 300px;"></div>

以降コードが長くなりますので、繰り返し部分は省きます。

ダブルクリックでの拡大を無効化

…
var mapOptions = {
	zoom: 12,
	disableDoubleClickZoom: true,
	…

ドラッグでの移動を無効化

…
var mapOptions = {
	zoom: 12,
	draggable: false,
	…

基本的な無効化はこれくらいでしょうか…その他にもスケール等の表示/非表示の設定も可能です。詳しくは以前書きました【Google Map コントロールナビの位置や航空写真切替の表示非表示の設定変更方法】をご参照ください。ここでは一部を除いて表にしておきます。
　

対象	プロパティ	無効/非表示	有効/表示
マウスホイール	scrollwheel	false	true
ダブルクリック	disableDoubleClickZoom	true	false
ドラッグ	draggable	false	true
航空写真切替	mapTypeControl	false	true
移動コントロール	panControl	false	true
拡大縮小バー	zoomControl	false	true
スケール	scaleControl	false	true
ストリートビュー	streetViewControl	false	true

以上になります。