GoogleMapをレスポンシブ対応で埋め込む【API Key取得編】

お客様のサイトのイメージにあった配色でオリジナルのGoogleMapをレスポンシブサイトに!
まずは、Google Maps API Keyを取得する事から始めましょう。

Google Maps API Keyを取得する手順


※2016年6月からGoogle Maps API Keyが必須!

2016年6月22日から、Google Map APIの利用に開発者向けAPIキーが必ず必要になりました。
そのために、APIキーを使わずに新しくGoogle Mapを作成すると、

Google Maps API error: MissingKeyMapError

というエラーが発生し、地図が表示出来ない場合があります。

まずは「Google Developers Console」にアクセスします。
※アクセスするにはGoogleアカウントが必要です。

・Google Developers Console
https://console.developers.google.com/

プロジェクトを作成する必要があるので新規作成したらIDが自動で設定されます。
「Google Maps Embed API」を”有効”にして下さい。

スクリーンショット-2016-12-29-15.23.50.png


スクリーンショット-2016-12-29-15.23.35.png


APIキーを承認する必要があります。


スクリーンショット-2016-12-29-15.24.40.png


必ず【HTTPリファラー(ウェブサイト)】にチェックを入れること!

スクリーンショット-2016-12-29-15.31.31.png


スクリーンショット-2016-12-29-15.24.06.png

これで完了です。
APIが承認され注意マークが消えていると思います。

※以前から使用されてる方はコードを下記コードに書き換えが必要です。


<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXX"></script>
「XXXXXXXXXXXXX」の文字を、今回取得した「Google Maps API Key」と置き換えます。

それでは、API Key取得編は以上になります。



この記事へのコメント


この記事へのトラックバック