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を使用する。もしくはマウスのスクリールで行うことも可能である

以上。

■ 関連


MapOption – backgroundColor/disableDefaultUI

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を固定にしたり、ドラッグでの移動を許可しなければ固定の地図を表示するにも良いだろう。

以上。

■ 関連


“地図を表示”のMapOption

Google Maps JavaScript APIにおいて、先日のエントリに使用した”MapOption“を確認。

■ 環境

  • Google Maps JavaScript API v3

■ コード

使用したJavaScriptのコードは下記の通り。

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

MapObjectに渡しているOptionは下記2つ。

  • center
  • zoom

リファレンスを見る限り、この2つが必須オプションのようである。

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

■ center

緯度経度なので、存在する所であればどこでも良いだろう。

■ zoom

数値を指定する。”0“から”21“まであるようである。

■ 実践

下記に、東京駅の緯度(35.681382)経度(139.766084)を使用してやってみる。

zoom: 0

zoom: 12

zoom: 15

zoom: 21

感覚的には”15“くらいが妥当といった所だろうか。

以上。

■ 関連

地図を表示

Google Maps JavaScript APIを使用して表題の通りのことをやってみる。

■ 環境

  • Google Maps JavaScript API v3

■ Getting Started

先日のエントリでAPIキーを作成したのでまずは実際に地図を表示する。

Getting Started
https://developers.google.com/maps/documentation/javascript/tutorial

JavaScriptのコードは下記の通り。Tutotialのものままである。

<script>
var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key={API_KEY};callback=initMap" async defer></script>

HTMLもそのままなのでここでは割愛。

■ 結果


確かに地図が表示された。

※ エントリ別の記事でなければ地図が表示されない…。

以上。

■ 関連

Google APIキーを作成

JavaScriptで表題をやりたいので調べる。まずはAPIキーが必要ということなので作成について。

■ APIキー

Googleのアカウントは普段利用しているものをそのまま使用する。自身の場合は”withsin“である。このアカウントでログインした状態で下記にアクセス。

dev-console-001

Google Developers Console
https://console.developers.google.com/start

上部メニューの『プロジェクトを選択して…』から『プロジェクトの作成…』を選択する。

dev-console-002

新しいプロジェクト』にて、『プロジェクト名』は”Maps API“で地図を触りたいので『maps-withsin』とした。

dev-console-003

作成』を押した後、少し待っているとプロジェクトのダッシュボードが表示された。

dev-console-004

Google APIを利用する』をクリックして進める。

dev-console-005

今回やりたいのはJavaScriptでの『Google Maps』なので、『Google Maps JavaScript API』を選択。

dev-console-006

APIを有効にする』を押す。

dev-console-007

少し待つと下記画面になった。『認証情報』というのが『APIキー』なのであろう。『認証情報に進む』を押す。

dev-console-008

認証情報を追加』を押す。

dev-console-009

APIキー』を選択する。

dev-console-010

今回はブラウザで地図を表示するのに使用したいので『ブラウザキー』を選択する。

dev-console-011

管理用の名前には、このブログで使用したいので『tech.withsin.net』としている。『HTTPリファラー』には『tech.withsin.net/*』と入れるのが良いのだろうが、まだテスト段階なので動作確認が終わった後で入力することにする。ということで『作成』。

dev-console-012

これで『APIキー』が作成された。

次回はこれを使用して地図を触ってみる。

以上。