【GoogleMap】Google APIキーを取得してカスタマイズ可能なGoogleMAPを埋め込む

GoogleMapをカスタマイズして埋め込みするには、APIkeyが必要

2016年6月より、Google MapをWEBサイトに埋め込む際にはAPI keyが必須です。

※埋め込みタグを発行してIframeを置くだけなら何も考えなくていいんですけどね。

APIを使って埋め込む

まずは、API keyを取得しに行きましょう。

API keyの取得

Google API Consoleにアクセス

プロジェクトを作成を選んで[続行]

「認証情報を作成」でAPIキーを発行

分かりやすい名前を付けて、HTTPリファラーを設定(設置したいwebサイトのドメインを設定)
※不正使用を防ぐために制限しましょう。

こんな感じで

deep-space.blue/*

ちなみにそのままだとプロジェクト名が[My Project]なので、複数管理したいときは[IAMと管理]→[設定]から変更できます。

 

ページにマップを埋め込む

APIを呼び出して

 

埋め込み場所を準備して……

 

Javascriptでマップ表示

 

★参考★
https://rmtmhome.com/googlemap-customize-design-928