【Google Maps Platform入門 #2】マップデモキー（Maps Demo Key）とは？無料で試せるデモの紹介

目的地を検索したり経路を調べたりと、現代人にとってGoogleマップは欠かせないサービスです。
このGoogleマップを企業のWebサイトやアプリに表示して、自由にカスタマイズ利用できるようにする仕組みが「Google Maps Platform」です。

前回の記事（#1）では、Google Maps Platformの概要と主要な4つの機能カテゴリ（Maps / Routes / Places / Environment）をご紹介しました。
今回は、Google Maps Platformの公式が提供するデモについて、その仕組みや、簡単なHTML作成で地図を埋め込む流れをご紹介します。

Google Maps Platformを利用する際、必ず登場するのが「APIキー」と「マップデモキー（Maps Demo Key）」です。本番運用とテスト時でそれぞれ役割が異なります。

■本番用の「APIキー」

　
■お試し用の「マップデモキー（Maps Demo Key）」

⚠️ 「マップデモキー（Maps Demo Key）」利用時の注意点

・本番環境（商用サイト等）での使用は厳禁
あくまで開発中の動作テスト・学習用のキーです。実際のWebサイトやアプリで公開する際は、必ず本番用のAPIキー（有償キー）へ差し替えてください。

・1日あたりの利用上限あり
1日の利用上限に達すると翌日まで一時停止します（勝手に料金が発生することはありません）。
なお、上限値は変更されることがあります。

・利用できる機能の限定
一部の基本的なデモ機能に利用が限定されており、すべてのGoogle Maps Platform機能が使えるわけではありません。

マップデモキー（Maps Demo Key）を使用し、Mapsカテゴリの代表格である「Dynamic Maps API（Webサイト上に動的なGoogleマップを埋め込めるAPI）」を使って、実際にPC上で地図を表示させてみました。
特別な開発ソフトは不要で、PC標準の「メモ帳」と「ブラウザ」だけで簡単に試すことができます。

1.以下の公式ページにアクセスします。
https://developers.google.com/maps/demo-key

2.ページ内の 「デモキーを取得（Get a Demo Key）」 ボタンをクリックし、Googleアカウントでログインします。

3.画面に表示される文字列（例: AIzaSy…）をコピーして手元に控えます。

今回は、Windows標準のメモ帳を使用します。

1.メモ帳を開き、以下のコードをそのままコピー＆ペーストします。

<!DOCTYPE html>

<html>

  <head>

    <title>Google Maps テスト表示</title>

    <style>

      #map {

        height: 400px;

        width: 50%;

      }

    </style>

  </head>

  <body>

    <h3>【テスト】Google Maps 表示成功！</h3>

    <div id="map"></div>

    <script>

      function initMap() {

        const tokyo = { lat: 35.681236, lng: 139.767125 };

        const map = new google.maps.Map(document.getElementById("map"), {

          zoom: 15,

          center: tokyo,

        });

        new google.maps.Marker({

          position: tokyo,

          map: map,

          title: "東京駅",

        });

      }

    </script>

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_DEMO_KEY&callback=initMap" async defer></script>

  </body>

</html>

　
2.コード一番下の key=YOUR_DEMO_KEY の部分を、①で取得したマップデモキー（Maps Demo Key）に書き換えます。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_DEMO_KEY&callback=initMap" async defer></script>

　
3.ファイル名を「map-test.html」などの任意の名前にし、デスクトップ等に保存します。
（※保存時の「ファイルの種類」は「すべてのファイル（*.*）」を選択）

保存したHTMLをダブルクリックしてブラウザで開きます。東京駅を中心とした動的なGoogleマップが表示されれば成功です。

【地図のサイズ（CSS）】
height: 400px; や width: 50%; の数値変更で大きさを自由に調整できます。

【表示する場所（中心位置）】
const tokyo = { lat: 35.681236, lng: 139.767125 }; の lat（緯度）と lng（経度）を目的地の座標に書き換えることで、場所を変更できます。

【拡大・縮小のズーム倍率】
zoom: 15 の数字を調整します。数字を大きくすると拡大表示に、小さくすると広域表示になります。

【ピン（マーカー）の文字】
title: “東京駅”の文字列を”自社ビル”や”〇〇店”など、案内に合わせた名称に書き換えると、ピンにマウスを乗せた際の表示が変わります。

【APIの呼び出し】
以下のコードで「Dynamic Maps API（Maps JavaScript API）」の呼び出しを行っています。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_DEMO_KEY&callback=initMap" async defer></script>

「key=YOUR_DEMO_KEY」を今回はマップデモキー（Maps Demo Key）に置き換えますが、本番ではここを有償キーに差し替えることで、リクエスト数に応じた請求・管理が行われます。

💡 補足：こんなカスタマイズも可能です
今回は基本の表示のみですが、JavaScriptで以下のような機能も実装できます。

・ピンの変更： 自社のロゴやオリジナル画像へ差し替え
（公式ページ：https://developers.google.com/maps/documentation/javascript/advanced-markers/graphic-markers）

・吹き出し表示： ピンをクリック時に住所や営業時間を表示
（公式ページ：https://developers.google.com/maps/documentation/javascript/infowindows）

・マップの着色： サイトデザインに合わせたカラー（モノトーン等）へ変更
（公式ページ：https://developers.google.com/maps/documentation/javascript/examples/style-array）

・複数ピン表示： 全国の店舗・拠点を同時にマッピング
（公式ページ：https://developers.google.com/maps/documentation/javascript/marker-clustering）

💡 補足：Cloudベースでもマップのカスタマイズが可能
Google Cloudの管理画面でデザインを作成し、「マップID」を発行して呼び出す方式もございます。
この方式を使うと、マップの着色やピンの変更などのCloud管理に対応した各種デザインについて、プログラムコードを直接書き換えることなく、管理画面の操作だけでWebサイトやアプリ上の地図デザインを一括更新できます。

Cloudベースでできるカスタマイズの概要やその方法の詳細は、以下の公式ドキュメントをご参照ください。
https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over

国際航業は、Googleのプレミアムパートナーとして、ライセンスのご提供のみならずGoogle Maps Platformを活用したシステム構築のご提案・サポートも行っております。
今回ご紹介したマップデモキー（Maps Demo Key）の活用方法やカスタマイズの実装手順をはじめ、導入に関する不明点やご相談がございましたら、お気軽にお問い合わせください。

　
■関連記事
・【Google Maps Platform入門 #1】Googleマップをサイト埋め込み！できること・選ばれる理由を解説🔰