基本の使い方
「管理画面 > 外観 > カスタマイズ > Lightning Charm ショートコード設定」から Google Map ショードコード設定をします。
Google Map を表示したいページや投稿で[charm-gmap]というショートコードを記入します。
ショートコード [charm-gmap] を入力
管理画面での設定が反映された Google Map が表示されます。
表示例
Google Map を複数設置する
Google Map を１つのページに複数設置したり、違う目的地の Map を複数設置することができます。
１つのページに複数設置する場合には、ショートコード毎に id=”id名” というオプション値をショートコードに記入する必要があります。
[charm-gmap id="map1"]
id 名は任意のもので結構ですが、ユニーク（サイト内で一意の）な半角英数字のものを記入して下さい。（例：map_meiekitenn / map_sakaetenn / map1 / map2 等）
複数設置した Google Map にそれぞれ違う Map を表示する
それぞれ違う Map を表示するには先の項目での id 設定に加え、目的地の経度と緯度を lat=”経度” long=”緯度” というオプション値で個別に設定する必要があります。
表示例1
[charm-gmap id="map1" lat="35.172364" long="136.908309"]
表示例2
[charm-gmap id="map2" lat="35.184482" long="136.897654"]
拡大比率を個別に設定する
拡大比率を各 Map ごとに設定したい場合は、zoom=”拡大比率” というオプション値をショートコードに記入します。
１つの Map だけ大きく拡大した Map を表示したくて拡大比率を20に設定する場合は以下のように記入します。
[charm-gmap id="map3" zoom="20"]
表示例
目的地ピン画像を個別に設定する
目的地のピン画像を各 Map ごとに設定したい場合は、pin_image=”画像がアップロードされている位置へのパス” というオプション値をショートコードに記入します。
あらかじめ、画像アップローダーでピンの画像を以下のアドレスへアップロードしてあるとします。
https://demo.dev3.biz/charm/wp-content/uploads/2016/09/pin534363.png
[charm-gmap id="map4" pin_image="https://demo.dev3.biz/charm/wp-content/uploads/2016/09/pin534363.png"]
表示例
目的地ピンタイトルを個別に設定する
目的地のピンタイトルを各 Map ごとに設定したい場合は、pin_title=”タイトルテキスト” というオプション値をショートコードに記入します。
ピンタイトルを「名古屋駅」を変えたい場合は以下のように記入します。
[charm-gmap id="map5" pin_title="名古屋駅"]
表示例
ピンをマウスオーバーするとタイトルテキストが表示されます。