【Webコーディング】Google Map PlatformでGoogle Mapをカスタムしてみた【HTML/CSS】【JavaScript】

背景

Google Mapが埋め込まれたWebサイトはたくさんありますが、
Google Map Platformでカスタマイズができるということで試してみました。

ググって出てきた記事内容とは画面レイアウトが変わっていたり必要な情報が異なっていたりしたため、備忘録がてら記事にまとめます。
※2021年9月現在の情報となります。

成果物

サイトの雰囲気に合った配色に変更、
オリジナルのアイコンを使用できました！

Googleマップの表示結果(左: 変更前、右: 変更後)

Google Map Platformとは

Google Map Platformは、モバイルアプリやウェブページにGoogleマップを埋め込んだり、Googleマップからデータを取得したりするために使用するAPIとSDKのセットです。
Google Cloudのうち、Google Map関連のものを言うようです。
位置情報 API  |  Google Maps Platform  |  Google Cloud

利用料金について、毎月無料枠として$200分の利用枠が与えられます。
無料のマップロード回数は28,000回ということです。

公式より :
料金表  |  Google Maps Platform  |  Google Cloud

手順

今回行ったカスタマイズは、スタイルの変更とオリジナルアイコンの使用です。
以下の手順で行いました。

• 利用開始と支払い情報の登録
• プロジェクトの作成
• APIとサービスの有効化
• APIキーの発行
• 【認証の制限】←重要
• 上限の設定
• アイコン画像を作成
• 表示したい地点の緯度・経度を取得
• カスタムスタイルを作成
• コードとスクリプトを記述

利用開始と支払い情報の登録

Google Maps Platformの｢始める｣から利用を開始します。
※Googleアカウント所持・ログイン前提

従量課金制となるので、事前に請求先を登録するよう案内されます。

利用規約にチェックして｢続行｣すると、携帯電話での認証画面に移ります。
電話番号を入力、｢コードを送信｣して携帯端末のコードで認証します。 請求先情報を入力し、｢無料トライアルを開始｣で完了です。

会社名・組織名、開発規模等も聞かれますが、今回は個人利用として設定をすすめました。

設定の最後からデモを作成すると各種APIが追加されたプロジェクトが作成され、APIキーも既に発行された状態となります。
その場合は余分なAPIの削除とキー制限を行います。

以下ではデモを作成せず1から自分で作成する場合を記述します。

プロジェクトの作成

ダッシュボード上部のメニューから｢新しいプロジェクト｣でプロジェクトを作成できます。

名前を指定して、｢作成｣をクリック。

APIとサービスの有効化

プロジェクトが作成できたら、
ダッシュボードから｢APIとサービスの有効化｣をクリック。

APIライブラリが開くので、今回使用するAPI、
Maps JavaScript APIを有効にします。

APIライブラリの｢管理｣から有効なAPIを一覧で確認できます。

APIキーの発行

APIを有効にできたら、APIキーを発行します。
｢認証情報｣から、｢認証情報を作成｣で｢API キー｣を選択すると作成されます。

認証の制限

APIキーはGitHub等に入れて公開しないようにします。公式より
ですが、万が一公開されたり外に漏れたとしても、悪用されてもエラーとするバリデーションを設けることができるので、不正利用対策ができます。
Google Map Platformは無償枠を超えると使用分だけ有料となるので、この設定は実質必須です。

APIキー作成画面そのままからは、｢キーを制限｣。

または、｢認証情報｣から使用するキーを選択し、編集ボタンをクリックします。

任意の名前を設定し、制限を設定していきます。

項目は以下の通りです。

• アプリケーションの制限
• ウェブサイトの制限
• APIの制限

【アプリケーションの制限】
今回はWebページに埋め込むので、｢アプリケーションの制限｣で｢HTTPリファラー(ウェブサイト)｣を選択。

アプリケーションの制限

【ウェブサイトの制限】
サイトのURLを指定すると指定したサイト以外からの利用をはじくようになります。
最後にアスタリスクを付けておくとこのサイト上であればすべて許可、と設定できるので便利です。

ウェブサイトの制限

【APIの制限】
｢キーを制限｣を選び、プルダウンから有効としたいAPIを選択します。これで指定以外のAPIの利用をはじくようにします。
Maps JavaScript APIを有効にします。

APIの制限

上限の設定

無料枠として28,000回のマップロード回数がありますが、ロード回数の上限を設定しておくとさらに安心です。

｢割り当て｣から｢Maps JacaScript API｣を選択し、｢Map loads｣を開きます。

Map Loads /日の上限が無制限となっているので変更します。
無制限のチェックを外すと割り当て上限の入力画面が出るので数字で入力します。

今回は、月30日の無料枠 28,000(回) ÷ 30(日) = 約933(回/日) という単純計算から、切りの良い数字で 900 としました。

アイコン画像を作成

今回はこちらの画像を使用します。

アイコンに使用した画像

表示したい地点の緯度・経度を取得

表示したい地点をGoogle Mapで開き、
アイコンを置きたい地点を右クリックして緯度・経度情報を表示させます。

この数値を後述するスクリプトに記述します。

カスタムスタイルを作成

自作スタイルをJSONで作成します。
Styling Wizardからスタイル調整し、JSONを出力することができます。
※アクセスすると新旧どちらを使用するか聞かれますが、旧型を選ぶことでStyling Wizardに飛びます。

Webサイトの配色に合うように適当に調節したら、｢FINISH｣をクリック。

編集後のStyle Wizard画面

｢COPY JSON｣でスタイルのJSONを取得します。

これを後述するスクリプトで読み込み、スタイルを適用します。

参考 :
Googlemapの外観を簡単にカスタマイズできるツール

コードとスクリプトを記述

マップを表示させたいWebページ上の該当部分のコードを以下のように記述し、スクリプトを追加します。

【HTML】

<!-- Google Map表示部分 -->
<div id="js-map-taeget" class="map"></div>
...中略...
<!-- スクリプト読込 -->
<script src="https://maps.google.com/maps/api/js?key=あなたのAPIキー&language=言語コード">
</script>

【JavaScript】

function initialize() {

  const google = window.google;

  //緯度経度の変数
  const lat_lng = {
    lat: x, //xに緯度を入れる
    lng: y //yに経度を入れる
  };

  //緯度経度を設定
  let map = new google.maps.Map(document.getElementById('js-map-target'), {
    center: lat_lng,
    zoom: 18 // 推奨: 11から18で調整
  });
  
  //スタイルの設定
  let style = new google.maps.StyledMapType([
    /*
    JSONを入れる
    */
  ],{name: 'Styled Map'});
  
  //マーカー用の画像
  const marker_image = '画像のURL';

  //マーカー
  let marker = new google.maps.Marker({
    position: lat_lng,
    map: map,
    icon: marker_image
  });
  
  //オプションを適用
  map.mapTypes.set('js-map-target', style, marker);
  
  //マップをセット
  map.setMapTypeId('js-map-target');
  
}

initialize(); // マップを初期化して表示

注意点

• 外部スクリプトの読込URLは｢https｣から始まるようにする(Mixed Contentエラーを避ける)
• アイコン画像のパス指定に注意
• GitHubでパブリックリポジトリにAPIキーを上げない
  • 万が一上げてしまった場合、キーの再発行とコミット削除
  • 参考: APIのKeyをGithubに上げたくなかったのでしたこと(PHP)
• その他のエラー
  • GitHubに謎のHTTPレスポンスヘッダが含まれている - Qiita
  • Google MAP Javascript API 実装時に発生したエラーの対応方法 | なんとなくWEBで食べていく

おわりに

今回はGoogle Map Platformを使用し、色とアイコンをカスタマイズしてみました。 今後のWebサイト制作でも活用したいと思います！

ありがとうございました。

参考

• 【要確認】Google Maps Platform APIキーの取得方法と注意点 | ワードプレステーマTCD
• Google Maps API の使い方 利用方法 / Web Design Leaves
• GoogleMapの簡単な埋め込み方法。アイコンやデザインのカスタマイズも！ | 株式会社LIG