基本の使い方

「管理画面 > 外観 > カスタマイズ > Lightning Charm ショートコード設定」から Google Map ショードコード設定をします。

Google Mapショードコード設定 を詳しく見る

Google Map を表示したいページや投稿で[charm-gmap]というショートコードを記入します。

ショートコード  <div id="charm_map_id_map1" class="charm_map_div" data-lat="35.170915" data-long="136.881537" data-zoom="16" data-pin_image="http://demo.vs1.biz/lightning-charm-demo/wp-content/uploads/sites/35/2016/09/pin.png" data-pin_title="" data-pin_width="89" data-pin_height="101" style="width:100%" ></div>  を入力

ショートコード [charm-gmap] を入力

管理画面での設定が反映された Google Map が表示されます。

表示例

Google Map を複数設置する

Google Map を1つのページに複数設置したり、違う目的地の Map を複数設置することができます。

1つのページに複数設置する場合には、ショートコード毎に 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=”拡大比率” というオプション値をショートコードに記入します。

1つの Map だけ大きく拡大した Map を表示したくて拡大比率を20に設定する場合は以下のように記入します。

[charm-gmap id="map3" zoom="20"]

表示例

目的地ピン画像を個別に設定する

目的地のピン画像を各 Map ごとに設定したい場合は、pin_image=”画像がアップロードされている位置へのパス” というオプション値をショートコードに記入します。

あらかじめ、画像アップローダーでピンの画像を以下のアドレスへアップロードしてあるとします。
http://demo.vs1.biz/lightning-charm-demo/wp-content/uploads/sites/35/2016/09/pin534363.png

[charm-gmap id="map4" pin_image="http://demo.vs1.biz/lightning-charm-demo/wp-content/uploads/sites/35/2016/09/pin534363.png"]

表示例

目的地ピンタイトルを個別に設定する

目的地のピンタイトルを各 Map ごとに設定したい場合は、pin_title=”タイトルテキスト” というオプション値をショートコードに記入します。

ピンタイトルを「名古屋駅」を変えたい場合は以下のように記入します。

[charm-gmap id="map5" pin_title="名古屋駅"]

表示例

ピンをマウスオーバーするとタイトルテキストが表示されます。