Google Maps JavaScritp APIのMapOptionをいくつか試してみる。

■ 環境

• Google Maps JavaScript API v3

■ リファレンス

公式は下記の通り。

https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapOptions

■ backgroundColor

地図が表示されるまでの背景色といったところであろうか。指定しなければ通常のHTMLやCSSで設定されている背景色がそのまま使われるはずである。

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

読み込み時に一瞬、黒くなっているのがわかるくらいであろうか。地図のズームを変更する時にわかりやすい。これは特に指定しない方が良い気がする。

■ disableDefaultUI

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

地図の左上および右下のUIが表示されない。zoomを固定にしたり、ドラッグでの移動を許可しなければ固定の地図を表示するにも良いだろう。

以上。

■ 関連

• Google APIキーを作成
• 地図を表示
• “地図を表示”のMapOption