BLOG

2015年7月9日/ Google Map, php, WordPress

WordPressでGoogle Map表示ならSimple Mapプラグインが超便利!

皆さんこんにちは、WordPresser(ワードプレサー)の宮本です。

※もちろんそんな職種はありません、ここ最近ずっとWordPressイジってるので言ってみただけです。

 

そのWordPressですが、単にブログを作るだけではなく、今ではサイト制作時のCMS(コンテンツマネジメントシステム)としても利用できます。

開発に便利なプラグインも多くあり、WordPressで作られているサイトは増えていっています。
(本サイトもWordPressで開発しております。)

 

そんな中、最近とある店舗紹介サイトを制作させていただいた際、お店の情報をクライアント自身で更新したいということで、名前、住所、電話番号、お店の特徴などの店舗情報を、追加、編集、削除できるようにWordPressを用いてCMS化しました。

 

その際悩んだのが地図の表示でした。

Google Mapを表示したいが、どうやったらお客様自身で簡単に地図を出せるように実装できるのか。

 

調べてみると・・・「Simple Map」というプラグインを使用すれば簡単にできるということが分かりました!

このSimple Map、店舗紹介サイトなど地図を多く動的に作るサイトでは非常にお勧めですので、その使用方法についてお伝えしたいと思います!

Simple Mapの使い方

まずWordPressの管理画面より、「Simple Map」プラグインを追加して有効化します。

 

Simple Mapをインストール

 

プラグインを有効化したら、地図を表示したい箇所に、下記のようにコードを書けば、それだけでGoogle Mapが表示されるようになります。

 

 

Google map

 

addrに住所を入れるだけ!すごく簡単ですよね!

地図の幅や高さも自由に設定でき、また緯度経度でも表示可能です。

詳しくはSimple Map開発者の方のサイトに載っているのでそちらをご覧ください!

Simple Map – 超簡単&スマフォ対応のGoogle Map | Firegoby

 

基本が分かれば、後はWordPressの管理画面から入力された情報を表示するようにするだけ!

今回私はカスタムフィールドで住所(address)を作成し、そこに入力された住所の地図を表示させるようにしました。

 

 

 

phpから表示する際は「do_shortcode」を使ってショートコードとして表示し、「esc_html」でエスケープ処理(※)しています。

※XSSを防ぐ為の処理。詳しくは下記サイトをご覧ください。
WordPressでechoする文字を適切にエスケープする

 

たったこれだけで追加した店舗毎に地図を表示できます!

最後に

いかがでしたでしょうか。

こんなプラグインないかなー?とググれば大抵ある世の中。

素晴らしいですね!

Resent Posts

Category