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

以上。

■ 関連

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

以上。

■ 関連

• Google APIキーを作成
• 地図を表示
• “地図を表示”の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 APIキーを作成
• 地図を表示

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“である。このアカウントでログインした状態で下記にアクセス。

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

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

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

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

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

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

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

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

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

『APIキー』を選択する。

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

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

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

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

以上。