【Googleマップ】ウェブページに載せる方法



ウェブページでのGoogleマップ使用サービス、2018年6月11日から変わりました

使いたいけどよくわからない、料金体系が変わって使うのが怖い、そんな疑問について、まとめました。


使うには2通りの方法がある

1. 埋め込みコード
2. Google Maps API

埋め込みコードを使うには


Google Maps上で共有ボタンを選択、「地図を埋め込む」から html をコピー、Web ページにペースト。

この方法は、6月11日以降も無料で使えます。

【参考】
WEBサイト内でのGoogleマップ利用について変更点をまとめる - orangeitems’s diary

Google Maps APIを使うには

Googleアカウントクレジットカード情報が要ります。

クレジットカード情報は、利用に際して登録するため。
使用量を超えたら、自動で引き落とされるわけではありません
また、使用量は制限を設定することができます。

【参考】
Google Maps APIが新しくなる!Google Maps Platformの料金体系と必要な設定変更 | mariweb

1.Google Maps Platformで設定


1.Google Maps Platformにアクセス
2.APIを選択
3.プロジェクトを作成
4.ユーザー情報、クレジットカード情報を登録
5.APIキーを取得
6.APIと認証情報を設定

6の「APIキーの利用制限」では、「HTTPリファラー(ウェブサイト)」を選択、ドメインを入力します。

例)「https://sample.com/world/japan/tokyo/」で使うなら「https://sample.com/*」

2.ウェブページで設定


新たに使う場合、ウェブページのソースに、javascriptタグを追記します。

既に使っていて、サービス改定後、地図がグレーがかって表示された、警告が表示された場合、APIキー部分を追記することで、正しく表示されるようになります。

なお、既に使っていて「key="~"」にパラメタがついていれば「&」で連結します。

【参考】
Google Maps の APIキー を取得する – ねんでぶろぐ

使用量を制限するには


しておいたほうが安心。

【参考】
Google Maps APIが新しくなる!Google Maps Platformの料金体系と必要な設定変更 | mariweb

まとめ


埋め込みコード使用なら、変更なし。

Google Maps API使用なら、Google Maps Platformとウェブページで設定。

なお、APIを使うなら、アクセスログのチェックをおススメします。