Simple Mapを使ってみる

2017.03.15

WordPressでGoogle Mapsを簡単に追加できるプラグイン「Simple Map」を使ってみます。

インストール

プラグイン > 新規追加を選択して、右上の検索ボックスで「Simple Map」と検索します。
検索結果に「Simple Map」が表示されるので、今すぐインストールをクリックします。

インストール完了後、有効化をクリックします。

左メニューの設定にSimple Mapという項目が追加されるので選択します。
Google Maps APIを使う際にAPIキーが必要になるので、記載されている手順に沿ってAPIキーを取得します。
取得できたらSet API Keyに入力して、変更を保存をクリックします。

地図を表示させる方法は、住所をショートコードで加工方法、属性に住所を指定する方法、緯度と経度を指定する方法があります。
それぞれ投稿画面で以下のように記述します。

[map]静岡県裾野市須山字藤原2255-27[/map]
[map addr="静岡県裾野市須山字藤原2255-27"][/map]
[map lat="35.2558739" lng="138.8113105"][/map]

widthとheightでサイズを指定できます。
初期値はwidthが100%、heightが200pxです。

[map width="480px" height="320px"]静岡県裾野市須山字藤原2255-27[/map]

zoomで地図の拡大率を指定できます。
初期値は16です。

[map zoom="12"]静岡県裾野市須山字藤原2255-27[/map]

breakpointでGoogle Static Mapsと切り替えるブレークポイントを指定します。
初期値は480です。

[map breakpoint="320px"]静岡県裾野市須山字藤原2255-27[/map]

ショートコードで囲まれた部分が吹き出しに表示されるので、属性に住所を指定することで吹き出しの中身を設定できます。

[map addr="静岡県裾野市須山字藤原2255-27"]ジャパリパーク[/map]

【参考サイト】