【2017年最新版】Googleマップ、埋め込んでも表示されない場合のTIPS

あけましておめでとうございます。Cocoaウェブディレクターの中島です。

少し古いニュースではあるのですが、比較的お問い合わせが多い内容に関して今日はお答えしていこうと思います。

2016年中旬以降、新規作成サイトにてGoogleMapsの地図を埋め込んだ際に、以下のような表示になってしまっていませんか？

なぜだ・・・、今まで普通に埋め込みできたのに。。

こう思った方は少なくないと思います。

特に、サイトにGoogleMapsを埋め込むのはほぼ必須と言っていい昨今。これは困る。どうすればいいんだ。。

2006年中旬以降、新規サイトへのGoogleMaps埋め込みにはAPIキーが必須

上記の通り、サイトにGoogleMapsを埋め込むには、ディベロッパー登録と専用Javascriptコード（APIキー）の取得が必須です。

うわぁぁ、メンドクセぇ！

そう思いそうですが、実は3分で完了します。

下記の方法に従って、慌てずにやってみましょう。

事前準備として必須なのは、Googleアカウントを取得することだけです。

xxxxx@gmail.com

などアカウントを持っていればそれでOKです。

APIキーの取得方法

まずは、Google Maps APIs for Webへアクセスします。

慌てずに上記のリンクをクリックしてください。

こんな画面が出ましたね？それでは、右上の「キーを取得」をクリックです。

指示に従い、特に何もいじらずにひたすら「続ける」「続行」をクリックしていきます。

下記の画面になったらSTOP。

「名前」は任意です。適当にサイト名でも入力しておきましょう。

「このHTTPリファラー～～～～」のBOXに、作成中サイトのURLを入力します。

http://は不必要です。xxxx.comと入力しましょう。

これでAPIキーが発行されたはずです。

忘れずにコピーしておきましょう。

サイトへのAPIキーの追加

あとひと手間で完了です。慌てずに行きましょう。

作成中のサイトの、ヘッダーに、

<script src="https://maps.googleapis.com/maps/api/js?key=●●●●●●●●●●●●●●"></script>

と追加してください。●の部分が先ほど取得したAPIキーです。

ぶっちゃけ、ヘッダーじゃなくても動きますが、ヘッダーに挿入されることが推奨されています。

Googleはこの手のコッソリ変更が多い

今回はGoogleMapsに関してのTIPSでしたが、Googleの提供するサービスはあまり派手な告知が無くコッソリと使用変更する場合が結構あります。

うまくいかない場合は、あきらめずに調べてみると、実は仕様変更していた、という場合がありますので慌てずにいきましょう。