「Google Mapが突然表示されなくなりました」
TCDのカスタマーサポートに寄せられる質問でも多い部類に入ります。今回はGoogle Mapの表示に関わるGoogle Maps Platformについて実際の取得作業を行いながら、記事を作成しました。GoogleMapで不具合のある方の参考になれば嬉しく思います。
突然Googleマップが表示されなくなってしまった場合は、まずAPIキーの設定を確認しましょう。今回の記事ではAPIキーの取得方法と、TCDテーマでGoogleマップを使用する場合のAPIキー設定方法をご紹介します。以前からAPIキーは存在していましたが、あいまいな運用をしている人（会社）が多い印象もありました。それは、APIキーの設定が無くてもマップが表示されていたり、結構な規模のメディアにおいても有料プランを使わずに運用できているといった話も聞いていたからですが…そのようなケースだと今回の仕様変更では重い腰を上げないといけなくなったのかもしれません。あなたも他人事と思わず、これを機に、管理サイトを確認して、設定を見直してみましょう。
GoogleMapが表示されなくなった理由について
今回の変更が原因で、グーグルマップが非表示になる原因としては大きく3つあります。1つ目は新規ドメインでの地図表示には「APIキー」の必須になったこと、2つ目にマップの読み込み上限数の大幅ダウンがあります。3つ目はに課金設定を有効にしていない場合です。
それぞれのトラブル対応について
APIキーとは、Google Maps APIを使用するための鍵のようなもので、取得したAPIキーをWebサイトのHTMLファイルにあるスクリプトタグ内に記述することでGoogleマップを表示することが可能になります。APIキーを使えるように設定したサイトには無償の使用制限の中でまずMapが使えるようになります。Mapの読み込み数によって自動で課金状態に移行するため予めクレジットカードや販売代理店での支払い（課金）設定が必要です。
支払い（課金）設定に関しまして、現時点でインターネット上で情報を検索をしてみると無料使用の範囲では課金設定不要という内容をいくつか見ることがあります。対応に何らかの差がある可能性はありますが、今後の為にも早めの設定を行うようにしましょう。外部サービスを使用するコツみたいなものかもしれませんが、仕様面の分かりにくい点は自分たちで解釈しようとせず公式に問い合わせた方が良いと思います。
APIキーを利用していない場合
APIキーを設定していないアクセスについては地図が表示されなくなります。その他のAPI機能もご利用できなくなりますので、この記事を参考に対応をお試しください。
無償枠200ドルを超えた場合
現在（2018年7月16日以降）は、「Google Maps Platform」が適用されています。簡単にいいますと、月間で200ドル(※1)を超えた場合、クレジットカードの登録もしくは代理店のコード（代理店支払い登録）がなければ、超過した段階で地図が表示されなくなります。同時に同じアカウントに紐づいたその他のAPI機能も利用に制限が掛かってしまいます。
- 静的な地図を表示
- 月間100,000リクエスト
静的なGoogleマップの地図をインターネット上のWEBサイトやイントラネット環境にて表示 - 動的な地図を表示
- 月間28,000リクエスト
動的なGoogleマップの地図をインターネット上のWEBサイトやイントラネット環境にて表示 - モバイルアプリで地図を表示
- 基本的に無制限
静的・動的を問わず、モバイルアプリにてGoogleマップを表示します。 - ストリートビューを表示
- 月間28,000リクエスト
指定する地点の周辺画像を取得することができます。 - ルート検索
- 月間40,000リクエスト
2点間の経路や、複数地点をまわる最適巡回、さらに渋滞情報を加味したルートを検索することができます。
（渋滞を加味※渋滞情報を利用する場合は、Directions Advancedとなり、月間20,000リクエスト） - スポット検索
- 月間11,000リクエスト
お店や施設など、指定箇所のスポット情報を取得することができます。 - ジオコーディング
- 住所から緯度経度への変換や、緯度経度から住所への変換にご利用いただけます。
課金設定をしていない場合
API キーをお持ちの場合は、移行ツールを使用し、Google Maps Platform API を使用しているすべてのプロジェクトを課金アカウントで管理するようにします。課金設定後に無料枠を超えないようにする設定をこちらで説明しております。
これまでとの(2018年7月16日前後の)違いを調べました
| 変更前 | 変更後 | |
| 無償版 | 公開利用において、1日25,000マップロードまで無償 （月間30日で750,000マップロード） |
月間28,000マップロードまで無償 ※超えた分は請求対象 |
| 有償版 | 最低の支払いが年間100万円以上から | 0円から利用可能 |
「Maps JavaScript API」において、これまでは「25,000リクエスト/日」まで無料だったのですが、これからは「28,000リクエスト/月」と、大幅に縮小されているようです。（1日あたり→1ヶ月あたり）しかも、他のAPIを使うと合算されてしまうということで…ちょっとアクセスが多いサイトは不安になりますよね…その場合は「Google Maps Embed API」のMAP（iframeタイプ）に切り替えると無料のまま心配なく運用できるようです。
※月間200ドルは各API機能を利用した場合の合算となります。詳しくはGoogle Maps Platformの料金をご覧ください。
それでは実際にAPIキーを取得設定してみます
この記事ではGoogle Maps Platformの利用に必要な、Googleアカウント作成〜APIキーの指定、有効化の方法についてご紹介します。Googleアカウントに関しては既に持っている人が多いかもしれませんが、もし未取得でしたら参考に登録から進めていただけたらと思います。持っている人はGoogle Maps Platformの設定から進めてください。
APIキーの設定手順（クリックで該当箇所に遷移します）
↓
Google Maps Platformにてプロジェクトの作成
↓
APIキーの有効化
↓
APIキーの作成
↓
支払い情報の登録（クレジットカード）
↓
APIキーの指定
Googleアカウントの作成
Google APIコンソールにてAPIキーを作成する場合、Googleアカウントにて作成を行います。Googleアカウントをお持ちでない場合はGoogleアカウントの作成を行う必要があります。下記のページを参考にGoogeアカウントの作成を行ってください。
Google Maps Platformにてプロジェクトの作成
Googleアカウントをお持ちでない場合は先にGoogleアカウントの作成を行う必要があります。
下記のページに接続し、「プロジェクトの選択」をクリックしてください。
プロジェクト選択画面の「新しいプロジェクト」をクリックしてください。
プロジェクト名を入力して「作成」ボタンをクリックしてください。
APIの有効化
「Googleアカウント作成」と「Google Maps Platformにてプロジェクト作成」作業が完了していますか？また、下記のGoogle APIコンソールのダッシュボードに接続していることを前提に次の手順を案内します。
作成したプロジェクトが選択されていることを確認しましょう。「開く」を押して次に進みます。
プロジェクトを選択して進めた状態で左側メニューから「APIとサービス」→「ダッシュボード」をクリックしてください。
「APIとサービスの有効化」リンクをクリックしてください。
利用したいAPIを選択してください。（今回はホームページにjsを使ったGoogleMapを表示したいのでMaps Javascript APIを選択しています）
利用したいAPI選択後、「有効にする」ボタンをクリックしてください。
あまり通常のウェブコンテンツ利用では使うことが無いかもしれませんが、Mapを多様しているウェブサイトをアプリ化している場合は影響があるかもしれませんので簡易的ですがMaps JavaScript APIで取得できるフィールドの種類と機能についてまとめてみました。新しいメニューも増えて取得する情報の量によって、価格(単価)が変わるということです。GoogleMapはAPIをガシガシ触ってものすごく活用してます！という人以外は影響ないと思います。
本記事で解説していないMaps JavaScript APIで取得できるフィールドの種類と機能について参考までにまとめてみました（簡易版）
- Mobile Native Static Maps
- Maps SDK (Android/iOS) で静止地図を表示するAPI機能。
- Mobile Native Dynamic Maps
- Maps SDK (Android/iOS) でユーザ操作可能な地図を表示するAPI機能。
- Embed ※無料iframeの埋め込みタイプ
- シンプルなHTMLでGoogleマップの機能をウェブサイトに組み込むAPI機能。※地図＋マーカー表示
- Embed Advanced ※iframeの埋め込みタイプだが、高機能で有料
-
Directions モード
マップ上の二か所以上の指定された地点間のルートと、距離や移動時間を表示する機能。
Search モード
表示可能なマップ領域に検索結果を表示する機能。
View モード
マーカーやルートが表示されていないマップを返す機能。 - Static Maps
- マップを画像としてアプリやサイトに実装するAPI機能。
- Dynamic Maps
- 独自のコンテンツや画像を使ってマップをカスタマイズできるAPI機能。
- Static Street View
- 360度のパノラマ画像を使用して実世界のスタティック画像を提供するAPI機能。
- Dynamic Street View
- 対象地域全体について、指定された道路からの360 度のパノラマビューを提供するAPI機能。
- Directions
- 10ヶ所以内の地点間の道順を計算するAPI機能。※交通情報含まない
- Directions Advanced
- 25ヶ所以内の地点間の道順を計算するAPI機能。※交通情報含む
- Distance Matrix
- 移動時間と距離を計算するAPI機能。※交通情報含まない
- Distance Matrix Advanced
- 移動時間と距離を計算するAPI機能。※交通情報含む
- Roads – Route Traveled
- 経路に沿って収集した最大 100 個までの GPS 地点を受け取り、車両が走行していた可能性が最も高い地点にスナップした一連の同様のデータを返すAPI機能。
- Roads – Nearest Road
- 最大で 100 個の独立した座標を取り、各地点の最も近い道路上の区間を返すAPI機能。
- Autocomplete – 文字数ごと
- 入力に応じてプレイス名称や住所を自動的に取得できるAPI機能。文字ごとの課金。
- Autocomplete – セッションごと
- 入力に応じてプレイス名称や住所を自動的に取得できるAPI機能。セッションごとの課金。
- Places Details – Basic
- Placesの名称・住所情報。
- Places Details – Basic + contact
- Placesの名称・住所情報＋連絡先
- Places Details – Basic + Atmosphere
- Placesの名称・住所情報＋評価情報
- Places Details – Basic + contact + Atmosphere
- Placesの名称・住所情報＋連絡先＋評価情報
- Places Photo
- Placesの画像。
- Geocoding
- ジオコーディングは住所（番地など）を地理的座標（緯度と経度など）に変換するAPI機能。逆ジオコーディングは地理的位置を人間が判別可能な住所に変換するAPI機能。
- Geolocation
- モバイル端末が検出できる携帯電話の基地局や WiFiノード(ネットワーク)の情報に基づいて位置と精度半径を返すAPI機能。
- Time Zone
- 地表のさまざまな地点のタイムオフセットデータを取得できるAPI機能。
- Elevation
- 地表のあらゆる地点の標高データを取得できるAPI機能。（海底のような深い場所にも対応しており、その場合は負の値を取得）
- Find Place
- 入力した文字列（電話番号、住所、もしくは名称）からPlacesを検索するAPI機能。
- Places – Nearby Search
- （基本 + 連絡先 + 評価情報を含む）周辺検索機能。
- Places – Text Search
- （基本 + 連絡先 + 評価情報を含む）文字列に基づいて関連するプレイスの情報を返すAPI機能。
引用元はこちらです。
Maps JavaScript API
Places Library
ダッシュボードに有効化したAPIが表示されていることを確認してください。他に利用したいAPIがある場合は前の手順を繰り返しましょう。
細かい仕様、使用ルールについては公式のマニュアルを参照してください
API キーの使用についてGoogleCloudドキュメント
APIキーの作成
「認証情報」リンクをクリックして、「認証情報を作成」メニューから「APIキー」を選択します。
この時点でAPIキーは作成されますが、誰でもAPIキーを使用できる状態になっていますので、使用範囲制限の設定をします。セキュリティの強化のため「キーを制限」から設定を行ってください。
名前とアプリケーションの制限を指定します。
HTTPリファラー（ウェブサイト）
HTTP リファラーによる制限
IPアドレス（ウェブサーバー、crronジョブなど）
IP アドレスによる制限
Androidアプリ
パッケージ名およびフィンガープリントによる制限
iOSアプリ
iOS バンドル識別子による制限
今回はWordpressで作ったウェブサイトに使用するので「HTTPリファラー（ウェブサイト）」を指定してウェブサイトの制限に必要な項目を埋めていきましょう。
キーを利用するAPIに適したキーの制限を行います。キーの制限を行わずにAPIキーを利用した場合、外部にキー情報が洩れると悪意のあるユーザに利用されてしまう恐れがあるのでご注意下さい。下記から適切な制限を選択して設定を保存して下さい。
https://(API使用ドメイン)においてAPIを制限設定（ドメイン許可）をする場合についての設定例：
①ドメインの配下階層全てにおいてAPI使用を許可する。
https://(API使用ドメイン)/*
②サブドメインの配下階層全てにおいてAPI使用を許可する。
https://*.(API使用ドメイン)/*
支払い情報の登録（クレジットカード）
請求情報の登録を行います。無償枠を超えた場合自動で従量課金に移行するため、事前に請求情報の登録が必要となりました。しかし、セルフ設定できる方法はクレジットカードでの支払いとなってしまうようなので法人としては使いづらいこともあるかと思います。（Googleの国内代理店を通すことで設定は可能）
Google Maps Platformを開いて、使ってみるをクリックします。Googleアカウントにログインしていない場合は、右上のログインからログインして進めましょう。
Maps Routes Placesのうち、利用したいものにチェック後、「CONTINUE」をクリックします。Javascriptを利用してウェブサイトに地図を表示したい場合はMapsにチェックでOKです。
初回アクセスの場合は新規プロジェクト名を入力しますがこのページに書いてある前の手順を実行しておられる場合、既存のプロジェクトから選択できるかと思います。選択後NEXTをクリックします。
以降はそれぞれの請求先情報を埋めていくと完了です。
無料枠を超えないように制限の設定をしておく
管理サイトにマップは表示したいけれど、利用料金をかけたくないという場合や、料金がかからないか不安な場合は利用量を制限することも可能です。
左側のメニューから「API」を選択。
使用中のAPIを選択 ＞ 割り当て
にて上記キャプチャの画面に移動できます。そちらでリクエスト数の上限を細かく設定することで課金を防ぐことができるはずです。
作成したAPIキーをサイトに指定します
それぞれのコンテンツの指定形式に応じて作成したAPIキーを各APIに指定します。
Google Maps JavaScript APIを読み込む際に、パラメーターのkeyの値としてAPIキーを指定すればOKです。
<script src="https://maps.googleapis.com/maps/api/js?key=【APIキーをここに指定】"></script>TCDテーマをご利用の場合はTCDテーマオプションから簡単に設定できます。
ダッシュボード ＞ 外観 ＞ TCDテーマオプション ＞ 基本設定内
まとめ
Googleなど外部サービスを利用する際は細かな利用規約の変更、仕様変更に気を配らなくてはいけません。どこのウェブサイトでも当たり前のように導入されているサービスだからといって何も考えずに導入をしていると、注意力が低下して今回のような仕様変更で痛い目を見ることもあります。無意識にGoogleMapをチョイスしているのでしたらこれを機にMap表示の手法自体を見直すのも良いかもしれません。クラウドサービスで手軽に依頼も可能な時代でもありますし、オリジナルのマップに表示に変更するというのも良いかもしれません。別の方法であってもそちらの方がよかった！という発見も期待できます。今の時代はたくさんのサービスがありますので、サービスをしっかりと取捨選択しながら運用していけるように心掛けていきましょう。
今回は「Maps JavaScript API」を使用するための記事でしたが、今回の仕様変更を受けて需要が高まっている「Google Maps Embed API」を使って無料のままGoogleMapを掲載する方法についても後日記事化したいと思います。