みなさんのサイトのGoogle Mapsあはちゃんと表示されてますか？
サイトに表示していたGoogle Mapsが突然表示されなくなって困っっている方もいらっしゃるのではないでしょうか？今日は、そんな方のために原因と対処法について簡単にまとめてみたいと思います。
今までGoogle Mapsをサイトに埋め込む場合（iframe埋め込みは除く）は、以下の２つがありました。
記事最後にiframeで埋め込みをする場合についてふれていますのでご参考にしてください。
・Google Maps APIs Premium Plan(有償版)
・Google Maps APIs Standard Plan(無償版)
この２つがGoogle Maps Platformとして1つに統合されたことにより、一定の利用までは無償で、それ以降は有償になる仕様となりました。そして2018年6月11日以降、GoogleMapsが正常に表示されず、「Googleマップが正しく読み込まれませんでした」というメッセージが表示される現象が発生してしまいます。
上記のエラーとなる場合の要因は以下の３つになります。
・APIキーを利用していない場合
・APIキーを利用しているが、無償枠を超えた場合（無償の範囲は、月間28,000マップロード）
・請求先アカウントの登録がされていない（クレジットの登録が必須）
Google MapのVer3(現在のバージョン)は「APIキーが必要」ですが、 APIキーが無くてもサイトに地図は表示されていました。しかし、2016年6月22日から新規サイトでGoogle Mapsを使用する場合は「APIキーが必須」に変更になりました。
さらに、2018年7月16日よりGoogle MapはAPIキーを設定していても「Google Cloud Platform」で 請求先アカウントとプロジェクト(APIキー)を紐づけていないと Google Mapsが表示しなくなりました。
また、今までAPIキーが無くても GoogleMapsが表示されていたサイトも表示しなくなります。
APIキーの取得は「Google Maps Platform」にアクセスして行ってください。
※必ずGoogleアカウントにログインしてから行ってください。
APIキーの取得手順については、多くのサイトで紹介されているのでここでは割愛します。
次に、APIと認証情報の設定方法は「Google Cloud Platform」へアクセスし、請求先アカウントとプロジェクト(APIキー)を紐づける設定をします。
次に取得したAPIキーの使い方は、Google Mapsを表示する場合、ページのヘッダー(又はフッター 又はbody内)に Google Maps用のScriptを読み込むコードを記入してます。そのコードに key={APIキー}を追加するだけです。
静的ページの場合
【APIキー無し】
<script src="https://maps.googleapis.com/maps/api/js"></script>
【APIキー有り】
<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXX"></script>
WordPressの場合
テーマやプラグインによって、APIキーを設定する欄がある場合もあります。ちなみに、上記写真は本サイトに使用しているwelukaプラグインのAPIキー設定項目です。詳しくはテーマの提供元や制作会社にお問い合わせください。また、プラグインは公式サイトでご確認ください。
APIを使用しない方法
APIを使用しないでGoogle Mapsをサイトに表示させる方法について
iframeという方法があります。まず、埋め込みたい場所をGoogle Mapsで表示させます。
次に、「共有」というところをクリックしてください
表示されたポップアップウィンドウの「地図を埋め込み」をクリックします
そうすると、埋め込みコードが出てくるので「HTMLコピー」をクリックすればコードが取得できます。
iframeで使用できるオプション
マップ自体のサイズ変更は、width/heightを変更すればそのまま反映されます。
それ以外のパラメーターは以下のページをご参照ください。
https://developers.google.com/maps/documentation/embed/guide
ただし、レスポンシブに対応させるにはCSSに次のコードを追加する必要があります。
/* Googlemapレスポンシブ化 */ .ggmap { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .ggmap iframe, .ggmap object, .ggmap embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
その場合は、CSSのclassをdivタグで囲んでください。
<div class="ggmap"> <取得したiframeコード> </div>
みなさまのご参考になれば幸いです。
