Blog

HOME > Web > Wordpress > プラグイン > 【WordPress】GoogleMapに複数マーカーを表示するプラグイン（その２）「Basic Google Maps Placemarks」

【WordPress】GoogleMapに複数マーカーを表示するプラグイン（その２）「Basic Google Maps Placemarks」

2017/03/31

Wordpress プラグイン

備忘録です。

以前、「MapPress Easy Google Maps」を紹介しましたが、
Simple Mapとの相性が悪いのか、同じページで使えないことがわかりました。
（もしかしたら解決方法があるかもしれませんが・・・）

そこで、別のプラグインを試したところ、同時に表示することができました。
そのプラグインが「Basic Google Maps Placemarks」です。

インストール、有効にする方法は割愛しますので、参考サイトをご覧ください。
地図上に沢山のマーカーを表示できる「Basic Google Maps Placemarks」プラグイン

有効化すると設定に「Basic Google Maps Placemarks」メニューが表示されますので
まず設定から行います。

設定画面

Maps API KeyとGeocoding API Keyを取得して入力してください。入力しないと使えません。

Map WidthとMap Heightはサイトのサイズに合わせるのがいいでしょう。
レスポンシブの場合には、Map Widthを100%にするとデバイスのサイズに合わせて表示されます。

Map Centerはマップの中心点を設定します。

Zoomは初期に表示されるマップサイズ（拡大）になります。

次にPlacemarksメニューで地図を作成します。

今回は先日参拝した東国三社をカテゴリにして作成しました。

名前を「東国三社」、スラッグを「togoku3sha」にして登録

地図作成画面

名前を「息栖神社」にし、addressに住所を入力、カテゴリは「東国三社」にして登録、
同様に「香取神宮」「鹿島神宮」の作成。

説明欄にテキストやリンクを入力するとマーカーをマウスオーバーした際に吹き出しに入力内容が表示されます。

地図を作成したらショットカットを貼り付けます。

▼ ショートカットの例

[ bgmp-map ]

　…入力したすべての情報をマップ上に表示。

[ bgmp-map categories="parks,restaurants" width="500" height="500" ]

　…カテゴリーとサイズを指定して表示。

[ bgmp-map center="chicago" zoom="10" type="terrain" ]

　…表示する地図の中心位置とズーム、タイプを指定して表示。
中心位置は地名（ローマ字)、または緯度経度でもOKです。
※サンプルのショートカットは表示上の都合により半角スペースを空けています。

今回作成したショートカットは下記にして、ブログに貼り付けました。

[ bgmp-map categories="togoku3sha" center="itako" zoom="10" ]//中心地を地名で指定
[ bgmp-map categories="togoku3sha" center="35.946171, 140.589585" zoom="10" ]//中心地を緯度経度で指定

カテゴリを「togoku3sha」にして、センターは初期設定の東京ではなく潮来市（itako）にしました。

【御朱印】東国三社 香取神宮、鹿島神宮、息栖神社
下部に地図が表示されていますので、ご覧ください。
追記：
中心地名のitakoが認識されなくなったため、緯度経度に変更をしたところ再表示されました。



ゼヒトモ内でのプロフィール: ROCKSTREAM, ゼヒトモのホームページ作成・制作サービス, 仕事をお願いしたい依頼者と様々な「プロ」をつなぐサービス

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ