Googleマップがエラーで表示されない背景と対処方法：Tech TIPS（1/2 ページ）

連載目次

　例えば何かのチェーン店のWebサイトで店舗紹介ページを見ると、店舗の場所を示す地図（マップ）に「Googleマップが正しく読み込まれませんでした」と表示され、マップが正しく表示されない、という経験はないだろうか？

Webページ上のGoogleマップが正しく表示されていない例1

　あるいはマップが表示されるはずの所に、リンク切れを表すアイコンが表示されていたり、何らかのエラーを示すエラーが表示されていたりする場合もある。

Webページ上のGoogleマップが正しく表示されていない例2

　こうしたWebページ上に載っているGoogleマップが正しく表示されない不具合は、2018年7月ごろから増えている。いったい何が起こっているのか？　正しくマップを表示する方法はないのか？

　本TIPSではまず、こうしたマップ表示の不具合がなぜ生じているのか、その背景についてエンドユーザーの視点で説明したい。次に、どうすれば解決してマップを正しく表示できるようになるのか、Web担当者の視点で説明する。

なぜGoogleマップが正しく表示されないのか？

　結論から言えば、不具合の原因は、2018年7月からWebページ上のGoogleマップ表示の仕様が変更されたことによる。Webページを閲覧するエンドユーザー側のせいではない。

　Googleは2018年7月中旬から、Webページ上にGoogleマップを表示させるのにかかる料金を改定した。それに伴い、Googleマップを表示するAPIを呼び出す際、「APIキー」と呼ばれる呼び出し元を識別できる文字列を指定することが必須になった。

　その結果、APIキーを指定しないでAPIを呼び出していた従来のWebサイトでは、本稿冒頭に挙げたようにエラーが発生してマップが正しく表示されなくなってしまったのだ。またAPIキーを設定していても、それに料金の支払い設定をひも付けていない場合も、同様にマップは表示されないことがある。

　こうした理由から、エンドユーザーが主体的にこの問題を解決する術はない。対象のWebサイトの担当者がWebページなどを修正して解決すべき問題である。エンドユーザーとしてはWebサイトの問い合わせ窓口から、Googleマップが正しく表示されるように修正するよう要望するぐらいしかできないだろう（その際には本稿のURLを併記すると、修正が早く進むかもしれない）。

エラーを解消して再びマップを正しく表示させるには？

　ここからはWeb担当者を対象として、Webページ上のGoogleマップが正しく表示されない問題を解消する手順を説明したい。

　Webページ上のGoogleマップを正常な表示に戻すには、大別して二通りの方法がある。一つは前述のようにAPIキーを設定することだ。この場合、WebページのHTMLや各種スクリプトの修正は、原則としてAPIキーの追加指定の分だけで済む一方で、利用するAPIによっては無視できない課金が生じることになる（料金については最後に触れる）。

　もう一つの方法として、APIキーの指定が不要なGoogleマップ表示方式に切り替えることが挙げられる。この場合、課金は生じないものの、元のGoogleマップの実装次第では大幅にWebページの設計や記述を変える必要がある。

　本稿では前者のAPIキーを指定する方法を紹介する。それには、以下のように複数の手順が必要だ（すでに実施済みの手順はスキップできる）。

　HTMLの編集やGoogle Maps APIの利用に慣れていれば、それほど困難な作業ではないだろう。

　なお、Googleマップには「Premium Plan」という料金プランがあり、これを利用するならAPIキーの代わりに「クライアントID」を設定する必要がある。ただこのプランでは通常、契約時に管理者が明示的に割り当てられているはずなので、クライアントIDの指定などはその管理者と相談して決めた方がよい。

Googleアカウントを用意する

　まずはGoogleアカウントを用意する必要がある。このアカウントでGoogleにログインしてから、GCPを操作してAPIキーを生成する他、APIの利用料金を支払う請求先をひも付けることになる。

　Googleアカウントは次のページから新規作成できる。

　Chrome完全ガイド「Google Chromeの閲覧履歴やブックマークをPCとスマホの間で同期・共有する」でも作成手順や注意点を解説しているので、参考にしていただきたい。

　もちろん、既存のGoogleアカウントを利用してもよい。またG Suiteアカウントも、GCPの各種設定ができる権限が付与されていれば、利用可能だ。

GCPのプロジェクトを用意する

　Googleアカウントを用意したら、マップ表示用APIを提供しているGoogle Cloud Platform（以下、GCPと略）のWebコンソール（Google Developer Console）にログインする。

　新規作成したアカウントの場合、プロジェクトが一つもないので、以下のような画面が表示される。ここでマップ用にプロジェクトを一つ作成しよう。

GCPのプロジェクトを新規作成する（1/2）

▼

GCPのプロジェクトを新規作成する（2/2）

　既存のプロジェクトがあれば、それを用いてもよい。ただ、該当のマップに関連したプロジェクトがなければ、混乱を招かないよう、専用のプロジェクトを新たに作成した方が無難だろう。

請求アカウントを用意してプロジェクトにひも付ける

　プロジェクトを用意したら、それに「請求先アカウント」をひも付けて、課金が生じても料金が滞りなく支払えるように設定する。「請求先アカウント」とはGoogleアカウント／G Suiteアカウントとは別の存在であり、Googleからの料金請求時の管理単位となる。

　料金の支払いは基本的にクレジットカードになるので、クレジットカードを用意しておくこと。

　請求先アカウントの作成とひも付けについては、次のGCPのヘルプページを参照していただきたい。

マップ表示に使っているAPIを特定する

　APIキーを設定するには、対象のGoogleマップの表示に使われているAPIを特定することが欠かせない。APIの種類を明示して有効化する必要があるからだ（詳しくは後述）。以下では、主な3種類のマップ表示用APIとその検出例を紹介する。

●Google Chromeと機能拡張を利用するとAPIを特定しやすい

　マップ表示用APIを特定するには、Google自身が提供している「Google Maps Platform API Checker」というGoogle Chrome（以下、Chromeと略）の拡張機能を利用するのが手っ取り早い。

　まずはChromeで以下のChromeウェブストアのページを開き、拡張機能をインストールする。

　そして、そのChromeで正しく表示されていないGoogleマップのページを開いてから、ツールバー右側に追加されたGoogle Maps Platform API Checker（以下、API Checkerと略）のアイコンを探す。Google マップ上によく刺さっているマーカーを模したアイコンを探すと、すぐ見つかるはずだ。

　見つかったらクリックしてみよう。表示中のページで用いられているGoogle Maps APIの概要が表示されるはずだ。以下、APIごとに説明しよう。

●マップを大幅にカスタマイズできる「Maps JavaScript API」

　次の画面は、「Maps JavaScript API」というAPIで表示されているGoogleマップについて、API Checkerが検出・表示した例だ。

API CheckerがMaps JavaScript APIのエラーを検出した例

　Maps JavaScript APIでは、マーカーを独自のアイコンにしたり、マップの表示色を変えたりなど、マップを大幅にカスタマイズできるAPIだ。チェーン店の店舗紹介ページなどでもよく利用されている。

　このAPIを使っているページでは、以下のようなscriptタグが記述されているはずだ。

　この＜パラメーター＞にAPIキーを追加する必要がある（後述）。

●マップを一枚の画像として表示する「Maps Static API」

　次は「Maps Static API」というAPIの検出例だ。

API CheckerがMaps Static APIのエラーを検出した例

　Maps Static APIでは、静的な画像としてマップが表示される。ズームイン／アウトができないなど機能は限定される半面、JavaScriptを使わず、簡単に実装できる。

　このAPIを使っているページでは、以下のようなimgタグが記述されているはずだ。

　この＜パラメーター＞にAPIキーを追加する必要がある（後述）。

●iframeタグでマップを埋め込む「Maps Embed API」

　「Maps Embed API」というAPIの場合、APIキーが設定されていないとAPI Checkerでは検出されない。もっともその場合、マップが表示されるはずの領域には以下のようなエラーメッセージが表示されるので、すぐ分かるだろう。

Google Maps Platform rejected your request. You must use an API key to authenticate each request to Google Maps Platform APIs. For additional information, please refer to http://g.co/dev/maps-no-account

Maps Embed APIのエラー表示例

　Maps Embed APIは、iframeタグを使って比較的簡単に実装できる。またズームイン／アウトやルート検索などの機能も利用できる。

　このAPIを使っているページでは、以下のようなiframeタグが記述されているはずだ。

　＜モード＞には、マップの機能に応じて「place」「view」「directions」「streetview」「search」という単語が入る。APIキーは＜パラメーター＞の方に追加する必要がある（後述）。

●APIキーが不要な埋め込み型Googleマップもある

　Maps Embed APIによるGoogleマップと混同しやすいのが、以下のようなiframeタグで埋め込まれたマップだ。

　API CheckerではMaps Embed APIを使っていると検出される。だが、前出のMaps Embed APIのタグ記述とよく比べると、パスの部分に「/v1/＜モード＞」が含まれていない。

　これも埋め込み型Googleマップの一種で、Web版Googleマップで［共有］−［地図を埋め込む］−［HTMLをコピー］で得たHTMLソースコードによって表示できる。

　このマップの場合、APIキーを指定する必要はなく、執筆時点では（利用規約の範囲内で）無償利用が可能だ。正しく表示されていれば特に対処する必要はない。