simplemapが物足りないなら『TCD Google Maps』が良い!【googleマップ導入プラグイン】

plugin-tcdgooglemaps

googleマップをワードプレス乗せたい!と思った事はありませんか?

求人系やエステ案件などのアフィリエイトをしている方は地図を乗せた方が成約を取りやすかったりします。

やり方はいろいろ有りますが、プラグインは一番手っ取り早い導入方法です。

いままでは「simplemap」というめちゃくちゃ簡単なプラグインがありましたが、色々なワードプレスのテーマを販売しているTCDさんがプラグインをつくりましたが、これが調子良くていい感じです。

導入方法から、simplemapからTCD Google Mapsに乗り換えるメリットなどを紹介します。

「simplemap」から「TCD Google Maps」に乗り換える3つのメリット

デザインが豊富

simplemapはデザインがデフォルトの1種類でしたが、TCD Google Mapsは全10タイプのデザインが用意されています。

他の人とはちょっと違う地図を載せたい人にはピッタリです。

プレビューを見ながらカスタマイズが出来て豊富

カスタマイズの種類が豊富です。simplemapでできる倍率や縦横幅やズームの設定はもちろん、枠をつけるかどうかや地図の表示位置の設定まで出来ます。

simplemapは実際の投稿プレビュー画面を確認しないと地図がどう表示しているかは分かりません。

ショートコード機能が使える

simplemapが良いのはプラグインを入れてしまえば、投稿に反映させるのが簡単な点です。

[map zoom=”18″]住所[/map]で倍率を指定したり、[map width=”400px” height=”300px”]住所[/map]で幅を決めたり投稿画面で設定出来ます。
ショートカットが簡単で種類が様々な自分の好みにカスタマイズしやすいのが良い点です。

一方、TCD Google Mapsも様々なカスタマイズが可能ですが、設定画面上でカスタマイズするのがちょっと難点。

ですが一度設定をしてしまえばショートコードの「住所部分」を差し替えていくだけで変わってくれるので、カスタマイズが優る分TCD Google Mapsの方が良い感じです。

サンプル
[map address=”住所部分” width=”100%” height=”300px” theme=”cleancut” class=”dp-light-border-map ” zoom=”18″ draggable=”true” controls=”true”]

 

TCD Google Mapsの導入方法

TCD Google Mapsをダウンロードしてプラグインに追加

TCD Google Mapsは現在WordPress公式ディレクトリに申請中とのことですので、こちらからダウンロードしてください。

プラグインの「新規追加」からアップロードしましょう。

plugin-tcdgooglemaps2

 

有効化すると設定画面に「TCD Google Maps」が表示されます。クリックすれば様々な設定がカスタマイズ出来ます。

plugin-tcdgooglemaps3

 

TCD Google Mapsの設定・カスタマイズ

下図が設定画面です。日本語で書いてあるので非常に分かりやすいです。

住所をまずは入力するとプレビューが変わりますので、確認しながら自分好みのカスタマイズが出来ます。

plugin-tcdgooglemaps4

住所

住所を入力します。表記は「東京都西東京市南町4丁目4-2」でも「東京都西東京市南町4-4-2」でも大丈夫です。

ズーム

地図の倍率を設定出来ます。一番左にすると世界地図、一番右にすると詳細地図となります。

横幅

横幅は好みでもいいですが、スマホに対応させたい場合は「フル幅」をチェックしておけばOKです。

縦幅

縦幅も設定出来ます。

その他の設定

  • マップコントロールを表示する:ズームやストリートビューなどのコントロール画面を出すかどうか
  • 地図の外側に枠線を表示する:地図の外枠に白の枠を表示させるかどうか
  • 中央揃え:地図の表示位置を中央にするかどうか
  • ドラッグを許可する:ドラッグを許可するかどうか

テーマ

全10種類ありますので、プレビューを見ながら好きなテーマを選びましょう。

プレビュー

ここに設定したカスタマイズが反映されます。

ショートコード

最期にこのショートコードを投稿画面に貼付ければ終了です。

 

試しに「Clean cut」というテーマで作ってみるとこのようになりました。設定したのはこのぐらいです。

  • 横幅:フル
  • その他の設定:マップコントロール、外側に枠線を表示、ドラッグ許可
  • テーマ:Clean cut
plugin-tcdgooglemaps5

投稿にTCD Google Mapsのショートコードを反映させる

カスタマイズが終わったら設定画面の一番下のショートコードをコピーします。

plugin-tcdgooglemaps6

投稿画面にいき、ペーストします。

plugin-tcdgooglemaps8

画面はビジュアルエディター、テキストエディタードティラのモードでも大丈夫です。

枠線をつけると自動で影も付いて来てくれるのがいい感じですね。
実際はこんな感じになります。

plugin-tcdgooglemaps7

 

まとめ

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

地図をサイトに導入したい人にはおススメのプラグインです。動作も使った感じ軽快なので、是非導入してみては?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です