企業サイトを作成していて会社のアクセスぺージにGoogle Mapを組み込む場合が多々あります。しかし、このGoogle Map、2016年に「APIキーを使用しないと表示されなくなる」そして2018年は「APIキーを使用したGoogle Mapの使用が有料になる」などと話題になりました。しかし一方で、普通にGoogle Mapから取得したコードで地図表示をすることができるので、混乱されている方もいらっしゃるかもしれません。そこで私なりに調べたところ、どうやら表示回数によって使用方法が異なることがわかりました。
- 基本、APIキーのない場合はサポートされない(ただし、25000回/1日までは無料で表示可能)
- Google maps platform(Embed APIキー発行)は従量課金制(ただし、200ドル/月分まで無料使用可能)
つまり、アクセスページが25000回/1日表示されなければ、従来のGoogle Mapから取得したコードのままで問題なく、それ以上のアクセスが予想される場合はEmbed APIキーの取得が必要になるようです。またAPIキーを使用しても大抵の場合、200ドル/月以下のため無料で使える可能性あります。詳しい料金体系はGoogle maps platformページをご参照ください。
ただし、Google maps platformを使用した場合、表示マップのカスタマイズ等、Google Mapのコードを組み込んだ場合よりも機能が充実していますので個性的な表示を希望される方はGoogle maps platformの利用を検討されてみてはいかがでしょうか?
Google Mapを組み込む方法
今回はGoogle maps platformを使用しない通常の方法をご紹介します。
まず、Google Mapを開きます。
赤枠内に表示したい住所(サンプルで開門の住所を使用)を入力すると次のウィンドウが表示されます。
赤丸で囲んだ「共有」をクリックすると次のポップアップウィンドウが表示されます。
ウィンドウ内の「地図を埋め込む」タブをクリックします。
「HTMLをコピー」をクリックすると左に表示されている<iframe src="https://www.google.com/maps/embeded?pb=...>コードを一括コピーできます。
WordPressのダッシュボードに戻り、入力画面にコードをペーストします(タブが「テキスト」になっていることをご確認ください)。
表示サイズは下の図赤枠内で調整することができます。ここでは幅600ピクセル、高さ450ピクセルで設定しています。
以上でGoogle Mapをページに組み込むことができました。
【PR】
[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書[WordPress 5.x対応版] (Webデザイナー養成講座)
好評だった書籍『WordPress 仕事の現場でサッと使える! デザイン教科書』が最新WordPress 5.x環境に対応しました! WordPressを使って本格的なWebサイトを構築するために必要な基礎知識、独自テーマ作成手順、よりリッチなWebサイトにするためのカスタマイズやプラグイン活用、サイト運用テクニックまでわかりやすく解説します。もちろん、クライアントワークで必要とされるノウハウも満載。改訂版では、新しいブロックエディターの基本や活用テクニック、最新プラグインの使いこなし、スマートフォン・タブレットへの対応など、新たなトピックも取り上げています。WordPressを使うならぜひ手元に置いておきたい1冊です。
(技術評論社)