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
  });
}

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

以上。

■ 関連


GoogleMapsのキーボードショートカット

表題の通り。Google Maps API関連でいろいろ見ているとショートカットもあるらしいので何が使えるのか確認してみた。

■ 環境

  • Mac OSX (10.10.5)
  • Google Chrome

■ 移動

東西南北へ移動ができる。

  • : 北へ移動
  • : 南へ移動
  • : 東へ移動
  • : 西へ移動

PageUp“や”PageDown“でも移動できるようであるが、Macなので該当のキーがなくわからなかった。

■ 拡大/縮小

Zoom“を変更できる。

  • +: 拡大
  • -: 縮小

=“でも拡大が可能であった。

他にもあるのかもしれない。公式のヘルプやドキュメントでは該当の記述を探せなかった。

以上。

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
  });
}

以上。

■ 関連