Google Maps API V3 での細かな設定

Web制作ツール

2013.03.05

最近だんだん暖かくなってきて嬉しい kimoto です。今日は啓蟄ということで、冬眠から覚めた虫も這い出てくるそうです。

さて、前回書いた Google Map API V3 ですが、前回は基本的なことをざっと紹介しました。
今回は、そこからちょっとだけ踏み込んで、よくある設定を簡単にご紹介します。

マウスホイールでのズーム

デフォルト設定だと、マウスホイールで縮尺が変更になります。
ホイールで拡大縮小ができるのは便利といえば便利なのですが、ページをスクロールしようとしてるのに、マップにポインタが重なった瞬間にページがスクロールせずマップが縮小されて行ったりします。
これは意外と不便なので場合によってはオフにした方が良いでしょう。

google.maps.event.addDomListener(window, 'load', function() {
  var map = document.getElementById("map");
  var options = {
    zoom: 16,
    center: new google.maps.LatLng(35.447068, 139.634437),
    mapTypeId: google.maps.MapTypeId.ROADMAP
    scrollwheel: false
  };
  new google.maps.Map(map, options);
});

オプションに様々な設定ができます。
ここでは「scrollwheel」を「false」に設定しましょう。ズーム機能をオフにできます。
これで「ページの下の方見たいのに地図がズームしたキイイイイィィ！」って事がなくなります。

マップのスケール表示

現在見ているマップがどのくらいのスケールで表示されてるのか？

google.maps.event.addDomListener(window, 'load', function() {
  var map = document.getElementById("map");
  var options = {
    zoom: 16,
    center: new google.maps.LatLng(35.447068, 139.634437),
    mapTypeId: google.maps.MapTypeId.ROADMAP
    scaleControl: true
  };
  new google.maps.Map(map, options);
});

「scaleControl」を「true」に設定することでスケールを表示できます
サイトの作りにもよりますが、これがある方が便利な場面も多そうです。

ダブルクリックでのズーム無効化

本家 Google Map と同じく、マップ上でダブルクリックするとそこを拡大し右クリックをダブルクリックすると縮小します。
この動きを無効化することができます。

google.maps.event.addDomListener(window, 'load', function() {
  var map = document.getElementById("map");
  var options = {
    zoom: 16,
    center: new google.maps.LatLng(35.447068, 139.634437),
    mapTypeId: google.maps.MapTypeId.ROADMAP
    disableDoubleClickZoom: true
  };
  new google.maps.Map(map, options);
});

ここでは「disableDoubleClickZoom」を「true」にすることでダブルクリックのズームを無効化できます。
「disable」なので「ture」で無効化になることに要注意です。

マップのドラッグ

これも Google Map の代表的な UI 、ドラッグ機能。
こちらも無効化することができます。

google.maps.event.addDomListener(window, 'load', function() {
  var map = document.getElementById("map");
  var options = {
    zoom: 16,
    center: new google.maps.LatLng(35.447068, 139.634437),
    mapTypeId: google.maps.MapTypeId.ROADMAP
    draggable: false 
  };
  new google.maps.Map(map, options);
});

オプションで「draggable」を「false」にすることでダブルクリックのズームを無効化できます。
これは先程とは違い「able」なので「true」で有効、「false」で無効です。
スマホサイトで意図しないドラッグをさせたくない場合などにいいかもしれません。

まとめ

今回ご紹介した設定をすべて設定し、

マウスホイールでのズームを無効化
マップのスケールを表示
ダブルクリックでのズームを無効化
ドラッグでの移動を無効化

に設定したのが、下記のコードです。

    google.maps.event.addDomListener(window, 'load', function() {
        var lat = 35.447068;    // 緯度
        var lng = 139.634437;   // 経度
        
        var latlng = new google.maps.LatLng(lat, lng);  // 緯度経度
        
        var map = document.getElementById("mapDiv");    // 地図の場所
        
        // 地図のオプション
        var options = {
            zoom: 16,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            scrollwheel: false
            scaleControl: true
            disableDoubleClickZoom: true
            draggable: false 
        };

        // 地図オブジェクト
        var mapObj = new google.maps.Map(map, options);

        // マーカー設置
        var marker = new google.maps.Marker({
          position: latlng,
          map: mapObj
        });
    });

そして実際のマップはこんな感じになります。

まあここまですると、Google Map の利点がほとんどなくなってしまってますが…

そして前回同様、地図の位置は弊社シーブレインの位置です。
ここは風情もあるし、オサレなみなとみらいも近い、桜の季節には公園もあります。
しつこいようですが、一緒に働いてみませんか？