GoogleマップでFor development purposes onlyと表示時の修正方法

For development purposes onlyとは

For development purposes onlyとは翻訳すると「開発目的のみ」という意味。

Googleマップは2018年6月12日から「Google Maps API」を使用して表示させるものを有料化。

課金せずに使用しているGoogleマップに関しては「開発目的のみ」の表示に切り替えて「このページではGoogleマップが正しく読み込まれませんでした。」とグレーのフィルターがかかって表示されるようになった。

このウェブサイトの所有者ですか？の部分をクリックすれば詳細が書かれてあるのだが、英語なので理解できていない日本人が多い。

Google Maps APIを課金せずに使用しているGoogleマップのときに発生する現象なので逆に言うとGoogle Maps APIを使用せずにiframeで表示するGoogleマップだと無料でグレーにならずに表示される。

まずGoogleマップのページで表示したい場所を検索する(住所や緯度・経度も可能)
https://www.google.com/maps/?hl=ja

次に左のメニューをクリックする。

メニューを押すとメニュー一覧が表示されるので「地図を共有または埋め込む」をクリックする。

「地図を共有または埋め込む」をクリックすると共有ウィンドウが表示されるので「地図を埋め込む」をクリックしたあと「HTMLをコピー」をクリック。

以上の手順でGoogleマップを表示させるためのHTMLコードをコピーできるので、あとはWebサイトのHTMLファイルに貼り付けるだけだ。

「HTMLファイルに貼り付けるだけ」と書いたが貼り付ける場所を間違えたりするとページの表示崩れを引き起こす可能性がある。

また、Google Maps API使用した古いGoogleマップの削除作業も必要になるためHTMLやJavaScriptに精通しているプロに任せたほうが良いだろう。