MapOption – keyboardShortcuts

Google Maps JavaScript APIにおいて表題のオプションを試す。

■ 環境

  • Google Maps JavaScript API v3

■ keyboardShortcuts

Googple Mapsで使用できるキーボードショートカットを使えるようにするかどうか、を指定する。デフォルトでは”true“で使用可能である。

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 35.681382, lng: 139.766084},
    zoom: 15,
    keyboardShortcuts: false
  });
}

ショートカットが使えなくなったはずである。

以上。

■ 関連


MapOption – heading

Google Maps JavaScript APIにおいて表題のオプションを試す。

■ 環境

  • Google Maps JavaScript API v3

■ heading

航空写真表示(SATELLITE)の時かつ”zoom“が”18“以上の時にしか利用できないようであるが、「上をどの方角にするか」を指定できるようである。デフォルトが”0“で北。”90“が東を上に、”180“で南を上に、”270“で西を上に表示することができるようだ。

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 35.681382, lng: 139.766084},
    zoom: 18,
    heading: 270,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  });
}

南を上に。

zoomが”17“以下になると、北が上に戻るようである。他の角度からの画像はないということか。

以上。

■ 関連


MapOption – draggableCursor/draggingCursor

Google Maps JavaScript APIにて表題のオプションを試す。

■ 環境

  • Google Maps JavaScript API v3

■ draggableCursor

地図上でドラッグ可能であれば表示するアイコンである。デフォルトでは手が開いているアイコンが表示される。

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 35.681382, lng: 139.766084},
    zoom: 8,
    draggableCursor: "url(http://tech.withsin.net/dev/icon1.png), auto"
  });
}

地球のアイコンにしてみた。

■ draggingCursor

ドラッグ中のアイコンを指定する。デフォルトでは手が閉じてつまんでいるようなアイコンが表示される。

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 35.681382, lng: 139.766084},
    zoom: 8,
    draggableCursor: "url(http://tech.withsin.net/dev/icon1.png), auto",
    draggingCursor: "url(http://tech.withsin.net/dev/icon2.png), auto",
  });
}

ドラッグ中は火星(?)のアイコンにしてみた。

ちなみにデフォルトは下記の通り。

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 35.681382, lng: 139.766084},
    zoom: 8
  });
}

以上。

■ 関連


MapOption – draggable

Google Maps JavaScript APIにおいて表題のオプションを試す。

■ 環境

  • Google Maps JavaScript API v3

■ draggable

デフォルトは”true“で地図のドラッグが可能である。これを”false“にするとドラッグが不可になるはず。

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 35.681382, lng: 139.766084},
    zoom: 8,
    draggrable: false
  });
}

ドラッグが不可になっている。ドラッグ不可かつズームも不可にすれば固定の地図を表示しておく事が可能となる。

以上。

■ 関連


MapOption – disableDoubleClickZoom

Google Maps JavaScript APIにおいて、表題のオプションを試す。

■ 環境

  • Google Maps JavaScript API v3

■ disableDoubleClickZoom

デフォルトでは地図上をダブルクリックすると、ダブルクリックした地点を中心に地図が拡大される。

下記デフォルト設定の地図。

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 35.681382, lng: 139.766084},
    zoom: 8
  });
}

これを下記のように”disableDoubleClickZoom“を指定する。

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 35.681382, lng: 139.766084},
    zoom: 8,
    disableDoubleClickZoom: true
  });
}

ダブルクリックをしても地図が拡大されなくなる。地図の拡大縮小は右下のUIを使用する。もしくはマウスのスクリールで行うことも可能である

以上。

■ 関連