Google Map APIを使って、Webページにマップを表示させる方法

GoogleMapAPIを利用することで、Google Mapの機能をウェブサイトやアプリに埋め込むことができます。
Maps SDK for AndroidやMaps SDK for IOSといったように端末に応じたAPIがありますが、本記事では、Webアプリ用のMaps JavaScript APIを対象とします。

1. GoogleMapAPIKeyの取得

Google Maps APIはGoogle Maps API Keyが必須になります。
Keyの取得方法は他の方が纏めた記事があったので、そちらの方をご参照ください。

2. GoogleMapAPIの読み込み

Mapを表示させるために、JavaScriptファイルをHTMLで読み込みます。
方法は2つあり、後者の方を多用していました。

2-1. HTMLに直接記述する

「YOUR_API_KEY」に1で取得したKeyをコピペし、ブラウザで表示させるとマップが表示されます。

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    ></script>
  </body>
</html>

2-2. JavaScript上で動的に読み込む

「YOUR_API_KEY」に1で取得したKeyをコピペし、ブラウザで表示させるとマップが表示されます。
こちらを採用することで、サーバー側からKeyを取得することが可能になります。
データベース、azure key vaultといった環境に応じたKeyを設定することが可能になります。
callback=””でJavaScriptを読み込んだ後に任意の関数（後述する中心座標の設定や、マップのオプションの設定）を実行することができます。
※下記はJQueryを利用したコードですので、JQueryも必要になります。

index.js

function setMap() {
    $("<script>", {
        'src': 'https://maps.google.com/maps/api/js?key= ' + YOUR_API_KEY + '&callback=initMap'
    }).prependTo('Body');
};

3. MAPの中心座標やその他オプションを設定する

緯度、経度をフロント側へ渡して、この関数を実行することで、任意の地点をマップの中心として表示させることができます。
その他、Google Mapの画面右下にあるアイコンも表示、非表示切り替えができます。
この関数は、GoogleMapAPIのJavaScriptを読み込んだ後に実行する必要があるので、その点は注意が必要です。

index.js

function initMap() {
  var latLng = new google.maps.LatLng(緯度, 経度);
  var Options = {
    zoom: 21,               // 地図の縮尺値
    center: latLng,         // 地図の中心座標
    mapTypeId: 'hybrid',    // 地図の種類
    rotateControl: false,   // 回転・傾き有無
    tilt: 0,                // 航空地図にした時の、視点の傾きの角度
    scrollwheel: false,     // スクロール制御
    streetViewControl: false// ストリートビュー表示有無
  };
  MapObject = new google.maps.Map(document.getElementById('map'), Options);
}

4. MAPにアイコンを表示させる

google.maps.Markerに位置情報と表示するMAPオブジェクトを渡すことで画面上にアイコンを表示することができます。
この関数を繰り返し実行することで、任意の数のアイコンをマップ上に描画することができます。（1万件オーダーならば処理速度は気になりませんでした。）

index.js

function setIcon() {
  var iconLatLng = new google.maps.LatLng(緯度, 経度);
  new google.maps.Marker({
    position: iconLatLng,
    map: MapObject,
  });
}

まとめ

Maps JavaScript APIを利用することで、マップを使ったサービスを容易に構築することができます。
（例：従業員の位置情報把握、駐車場の空き情報確認、圃場の管理）
MAPにアイコンの表示以外にも、アイコン追加と削除、アイコンへのイベント（マウスオーバーやクリックイベント）付与、MAP上へポリゴン描画と削除等、フロント側で実装することが可能です。
データベースには緯度、経度の他にGeometry型のデータを格納しておくことで、距離を算出することができるようになります。

参考資料

GoogleMapAPIKeyの取得
https://tcd-theme.com/2018/08/google-maps-platform-api.html
公式ドキュメント
https://developers.google.com/maps/documentation/javascript/overview#maps_map_simple-html