ショートコードの取得方法

先にご紹介したプラグインでは、住所とマップサイズを指定するためのショートコードが必要となるものもあります。
ショートコードの取得は非常に簡単ですので、以下のコードを編集して作成してください。

[map addr=“東京都千代田区一番町17-6” width=“600px” height=“450px”]

「東京都墨田区押上1-1-2」は、ホームページ上で表示させたい住所を指定する箇所です。
実店舗や自社の住所に書き換えてください。
「width=“600px” height=“450px”」は、表示するマップサイズを指定する箇所です。
ただし、使用しているテーマがレスポンシブデザイン対応のものである場合は「px(ピクセル)」ではなく「%」で指定することをオススメします。

APIの取得

先にご紹介したプラグインでは、GoogleマップのAPIを取得が必須のものもあります。
APIキーを登録してプラグインを利用すると、マップの利用状況の確認も可能になりますので、APIが必須となるプラグインを使用する場合、またはマップの利用状況を確認したい場合は、以下の手順に従って取得してください。

step1.

1.png
まず、Google Maps APIs for Webへアクセスします。
以下の5種類のAPIが表示されていますので、使用したいものを選択してクリックしてください。

・Google Maps JavaScript API：マップのカスタマイズが可能
・Google Maps Embed API：コード記述や割当の制限なし
・Google Street View Image API：実際の画像とパノラマ画像の使用が可能
・Google Static Maps API：動的ページの読み込みを使用せずにマップの埋め込みが可能
・Google Places API JavaScript ライブラリ：多くの場所の最新情報が利用可能

step2.

2.png
続いてチュートリアルが表示されますので、必要な場合は閲覧します。
どのAPIを選択してもチュートリアルが表示され、そのままAPIの取得方法を導いてくれますので、表示されている手順に従って情報を入力し、進めてください。

まとめ

プラグインを使用せずにホームページにそのままマップを埋め込むことも可能です。
しかし埋め込み作業は非常に手間がかかるほか、マップが画面スクロールの邪魔になってしまったり大きなマップは埋め込むことができなかったりと、ホームページの作成者側も訪問するユーザー側も不便に感じてしまうケースは少なくありません。

今回ご紹介したプラグインを使用すれば、エンジニアがいないチームでホームページを作成する場合はもちろん、WordPress初心者の方でも簡単にホームページ上にマップを表示することができます。
プラグインを使用して、手間なく整ったホームページ作成を行いましょう。