Google Mapをページに埋め込む - プログラマブル深海魚

WebページにGoogle Mapを表示してみたかったので、実際にやってみました。

Google Mapを表示するには、Maps JavaScript APIを利用します。
Maps JavaScript APIはGoogle Cloud Platformを構成するAPIの1つなので、まずはGoogle Cloud Platformで必要な準備をしてから実際にコードを書いていきます。

プロジェクトを作成する
請求先アカウントの作成
APIキーを作成する
実際に埋め込んでみる
初期の中心点・倍率を指定する
マーカーを表示する
マーカーの位置を取得する
おわり
参考文献

プロジェクトを作成する

APIを使用するために、まずGoogle Cloud Platformにプロジェクトを作成する必要があります。

まず、Google Cloudを開きます。
https://cloud.google.com/

[コンソールへ移動]を押して、Google Cloud Consoleに移動します。

[プロジェクトの選択]を押して、プロジェクト選択画面の[新しいプロジェクト]からプロジェクトを作成します。

プロジェクト名に「Test Project」と入力している — プロジェクトの作成

プロジェクト名に「Test Project」と入力し（実際には何でもいい）、[作成]を押します。
これでプロジェクトが作成されます。

請求先アカウントの作成

課金をしない場合でも、プロジェクトには請求先の設定が必要になります。
請求先を設定するためには、請求先アカウントを作成してプロジェクトとリンクします。

まず、請求先アカウントを作成します。左のメニューから[お支払い]を押します。

[請求先アカウントを管理]を押します。

[アカウントを作成]を押します。

名前を入力して（ここでは「Test Project 請求先」）、[続行]を押します。

名前に「Test Project 請求先」と入力している — 請求先アカウント作成

お支払い方法を入力して、[送信して課金を有効にする]を押します。これで請求先アカウントが作成されます。

次に、プロジェクトに請求先アカウントをリンクするために、
プロジェクトのアカウントに「プロジェクト請求管理者」のロールを追加します。

左のメニューから[IAM]を押して、IAMの管理画面を開きます。アカウントの右にある鉛筆アイコンを押します。

[別のロールを追加]を押して、増えた枠の「ロール」に[Billing]>[プロジェクト請求管理者]を指定します。
指定したら、[保存]を押します。

これで、「プロジェクト請求管理者」のロールが追加されました。

最後に、請求先アカウントをプロジェクトにリンクします。

再度、左のメニューから[お支払い]を押して、表示された画面で[請求先アカウントをリンク]を押します。

作成した請求先アカウントを選択し、[アカウントを設定]を押します。

これで、請求先の設定が終わりました。

APIキーを作成する

Maps JavaScript APIを利用するために、まずはGoogle Maps Platform APIのAPIキーを作成します。

左のメニューから[Google Maps Platform]を押します。

そのまま、[GOOGLE MAPS PLATFORM に移動]を押します。

APIキーを、使用するリファラーに制限します。
今回、私はローカル環境で、Play Frameworkで作成したアプリケーション上を動かす想定なので、HTTPリファラーを選択してリファラーを"localhost:9000/*"としました。
（9000はAkka HTTPのデフォルトのポート番号）

今回は「HTTPリファラー（ウェブサイト）」、リファラーに「localhost:9000/*」を指定 — APIキーの制限

以上で、APIキーの作成が完了しました。
[認証情報]の画面で「鍵を表示します」を押すと、作成したAPIキーを表示できます。

実際に埋め込んでみる

実際に、以下を参考にGoogle Mapを表示してみます。
https://developers.google.com/maps/documentation/javascript/overview

まず、HTMLを作成します。
Google Mapを表示するdiv要素を用意し、Google Maps APIのスクリプトを読み込みます。（"YOUR_API_KEY"に発行したAPIキーを入れます）

<!DOCTYPE html>
<html>
<head>
  <title>Google Maps Test</title>
</head>
<body>
  <div id="map"></div>
  <script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</body>
</html>

次に、スタイルシートとスクリプトを書きます。今回はSCSSとTypeScriptで書きます。
スタイルは、マップ表示領域のサイズを指定します。スクリプトでは、Google Maps APIのスクリプト読み込みでcallbackに指定しているinitMap関数を定義します。
TypeScriptからGoogle Maps APIを使用する場合、先に@types/google.mapsパッケージをインストールする必要があります。

body {
  margin: auto;
  width: 60vw;
}
#map {
  width: 100%;
  height: 600px;
}

let map: google.maps.Map;
function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center: { lat: 35.625, lng: 139.429 },
    zoom: 18,
  });
}

HTMLのhead内にCSSとJavaScriptの読み込みを追加します。
（それぞれ/assets/styles/test.cssと/assets/scripts/test.jsに配置されると仮定）

<link href="/assets/styles/test.css" rel="stylesheet">
<script defer src="/assets/scripts/test.js"></script>

これで、画面にGoogle Mapが表示されます。

初期の中心点・倍率を指定する

google.maps.Mapのコンストラクタの第2引数に与えたオプションによって、中心地と倍率を変更することができます。

center: 中心点（緯度・軽度）
zoom: 倍率

上記の例ではサンリオピューロランドを表示しましたが、例えば以下とするとよみうりランドを表示することができます。

map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
  center: { lat: 35.628, lng: 139.516 },
  zoom: 16,
});

マーカーを表示する

以下のステップ2にある例のように、google.maps.Markerでマップのマーカーを定義します。
https://developers.google.com/maps/documentation/javascript/adding-a-google-map

スクリプトにマーカーの定義を追加します。また、オプションでdraggable=trueとすると、マーカーを画面上でドラッグして移動できるようになります。
（デフォルトではドラッグ不可）

const marker = new google.maps.Marker({
  position: { lat: 35.625, lng: 139.429 },
  draggable: true,
  map: map,
});

マーカーの位置を取得する

マーカーの位置を取得するには、マーカーに対してgetPosition()を使用します。
getPosition()により位置を取得して、さらにlat()とlng()でそれぞれ緯度と経度を取得できます。

「Get Position」ボタンを押すと、ダイアログで現在の緯度・経度を表示するように修正してみました。

<!DOCTYPE html>
<html>
<head>
  <title>Google Maps Test</title>
  <link href="/assets/styles/test.css" rel="stylesheet">
  <script defer src="/assets/scripts/test.js"></script>
</head>
<body>
  <div id="map"></div>
  <input id="getPosition" type="button" value="Get Position">
  <script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7BUBhU-Mf2GRr8ZRXF5IXF8oW3nnmQ20&callback=initMap"></script>
</body>
</html>

let map: google.maps.Map;
let marker: google.maps.Marker;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center: { lat: 35.625, lng: 139.429 },
    zoom: 18,
  });

  marker = new google.maps.Marker({
    position: { lat: 35.625, lng: 139.429 },
    map: map,
    draggable: true,
  });
}

document.getElementById("getPosition").addEventListener('click', (e: Event) => {
  alert(`Lat: ${marker.getPosition().lat()}, Lng: ${marker.getPosition().lng()}`);
});