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 |
以上になります。