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

以上。

■ 関連