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

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは。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

以上になります。