Googleマップ埋め込み時のエラーの対処法

Pocket

fotolia_99990959_subscription_l

皆さん、こんにちは。前田です。
Webサイトにはアクセス情報などのコンテンツで地図を埋め込むことが多々有ります、通常の方法でgooglemapからiframeを生成してサイトに埋め込む方法ではGoogleマップ埋め込み時にエラーが発生することはないと思いますが、過去記事で紹介しているようにgooglemapをカスタマイズするときはgoogleAPIが必要になってきます。過去記事を書いている時はgoogleAPIが必須ではありませんでしたが、2016年6月22日より必須になったのでgooglemapが表示されないと困っている方もいらっしゃると思いますので、今回はそのエラーの対処法について書いていきたいと思います。

2016年6月22日よりGoogleマップのAPIキーが必須に


2016年6月22日より、GoogleマップのAPIの利用にはAPIキーが必須になっております、それまでに設置していたものに関しては影響はないとのことですが、Googleマップが表示されないというエラーが多く発生しているという現状があるそうです。

新規でGoogleマップAPIを利用する場合はAPIキーが必要

2016年6月22日以降に新規でGoogleマップのAPIを利用して、地図を表示させる場合には、APIキーが必須になります。

Google Maps API error:MissingKeyMapError


Googleマップでエラーが発生すると以下のような表示がでると思います。初めての方はびっくりして焦ると思いますが、その内容を解説します。
「Google マップが正しく読み込まれませんでした。JavaScript コンソールで技術情報をご確認ください。」と書いています。正直Webをあまり触ったことない方は全くわからないと思います。

google-map-error

説明をすると「IEやchomeなどの開発者向けツールでJavaScriptエラーを確認しましょう」とうないようが記してあります。
エラーの中身を見てみると、Google Maps API error:MissingKeyMapErrorとなっています。「MissingKeyMapError」なのでGoogleマップのAPIキーがないですという意味です。

GoogleマップAPIキーのエラー対処方法


GoogleマップAPIを取得する

1.「Google Maps APIs for Web」へアクセスをします。
2.「キーを取得」ボタンをクリックします。
3.「アプリケーションを登録するプロジェクトの選択」という画面になるので、「新しいプロジェクトを作成」を選択し、「続行」ボタンを押してください。

名前は、特に規定はないので自分の判りやすい名前で大丈夫です。URLの設定は、「*.http://www.genius-web.co.jp/blog/*」 の様に、使用したいドメインを入力します。「作成」ボタンを押して、「保存」をクリックすると、APIキーの取得の完了です。

GoogleマップAPIキーの設定方法

GoogleマップAPIキーを取得しただけではエラーは解消されないので、Googleマップを埋め込んでいるページのJavaScript部分に取得したAPIキーを付け足します。

変更前:<script src=”https://maps.googleapis.com/maps/api/js”></script>
変更後:<script src=”https://maps.googleapis.com/maps/api/js?key=生成したAPI“></script>

パラメータが付いている場合

以下のようにjsの後に記述がある場合は、『?』ではなく『&』にして追加をします。

変更前:<script src=”https://maps.googleapis.com/maps/api/js?sensor=true”></script>
変更後:<script src=”https://maps.googleapis.com/maps/api/js?sensor=true&key=生成したAPI“></script>

まとめ


今回はGoogleMapsにエラーがでてうまく表示されないという方に向けてのブログですので経験のない方はパッとこなかったかもしれませんが知っていて損はありませんので是非頭に入れていていただけたらと思います。GoogleMapが表示されなくなったという方はこちらの設定を行ってみて下さい。