会社やお店の地図をサイトに掲載するときにGoogle Maps（グーグルマップ）を利用されている方は多いと思います。Google Mapsをデフォルトのデザインで利用する方も多いと思いますが、デザインをカスタマイズされている方も中にはいらっしゃいます。ただ、カスタマイズするとなると少々の知識が必要になります。
そんな時に便利なのがWordPressプラグイン「TCD Google Maps」です。豊富なデザインが揃っており、サイズやズームの度合い、住所を管理画面から変更し、ショートコードで記事中に簡単に入れることが出来ます。
「TCD Google Maps」は、TCD開発チームが制作したプラグインです。サイトに合わせたおしゃれなデザインのGoogle Mapsを利用したい場合にご利用下さい。
Image may be NSFW.
Clik here to view.
ここでは、プラグインのダウンロード方法や使用方法をご紹介いたします。
「TCD Google Maps」でこんなことが出来ます！
- デザインが豊富に揃っている（Discreet,Flat pale,Ultra lightなど全10タイプ）
- ショートコードで記事中に簡単に表示できる
- 住所を入力するだけで表示
- 縦・横サイズ・ズームの調整機能
- ボーダーの表示、非表示
- 中央表示の選択
TCD GoogleMapプラグインのインストール
下記のボタンからプラグインをダウンロードし、「プラグイン」→「新規追加」→「プラグインのアップロード」よりwp-content/pluginsディレクトリにインストールし、有効化してください。
TCD Google Maps
※WordPress公式ディレクトリに申請中（2016/01/22）
Image may be NSFW.
Clik here to view.
TCD Google Mapsプラグインの設定方法
プラグインを有効化すると、設定画面に「TCD Google Maps」の項目が表示されます。
Image may be NSFW.
Clik here to view.
クリックすると以下の設定画面が表示されます。
Image may be NSFW.
Clik here to view.
住所の入力
Image may be NSFW.
Clik here to view.
表示したい住所を入力してください。
ズーム設定
Image may be NSFW.
Clik here to view.
地図のズームレベルを選択します。
左端（世界地図）
Image may be NSFW.
Clik here to view.
真ん中（都市）
Image may be NSFW.
Clik here to view.
右端（詳細）
Image may be NSFW.
Clik here to view.
地図の横幅設定
Image may be NSFW.
Clik here to view.
地図の横幅(ピクセル値)を設定して下さい。レスポンシブデザインの場合はフル幅にチェックを入れて下さい。widthが100%で表示されます。
地図の縦幅設定
Image may be NSFW.
Clik here to view.
地図の縦幅（ピクセル値）を設定してください。
その他の設定
Image may be NSFW.
Clik here to view.
マップコントロールを表示する：ズームやストリートビューなどのコントロールを表示します。
地図の外側に枠線を表示する：地図の外枠に白の枠が表示されます。
中央揃え：地図の表示位置を中央にします。
ドラッグを許可する：地図がドラックによって動くようになります。
テーマ選択
10種類のテーマからお好みの物を選択ください。
Image may be NSFW.
Clik here to view.
デフォルト
Image may be NSFW.
Clik here to view.
Discreet
Image may be NSFW.
Clik here to view.
Flat pale
Image may be NSFW.
Clik here to view.
Just places
Image may be NSFW.
Clik here to view.
Clean cut
Image may be NSFW.
Clik here to view.
Even lighter
Image may be NSFW.
Clik here to view.
Ultra light
Image may be NSFW.
Clik here to view.
Light monochrome
Image may be NSFW.
Clik here to view.
Red hat
Image may be NSFW.
Clik here to view.
Light grey and blue
Image may be NSFW.
Clik here to view.
Elevation
Image may be NSFW.
Clik here to view.
プレビュー
Image may be NSFW.
Clik here to view.
設定したデータが随時プレビュー表示されます。
ショートコード表示
Image may be NSFW.
Clik here to view.
設定したデータに基づきショートコードが表示されます。これを投稿画面や固定画面に貼付けてください。
記事への設置方法
それでは、先ほどのショートコードを実際に貼付けてみます。
投稿画面より下記のようにショートコードを記載します。
Image may be NSFW.
Clik here to view.
表示すると、
Image may be NSFW.
Clik here to view.
このようにカスタマイズされた地図が簡単に作成することができます。
以上で解説を終了します。GoogleMapをカスタマイズする際にとても有効なプラグインとなっております。ぜひご活用くださいませ。
TCD Google Maps
※WordPress公式ディレクトリに申請中（2016/01/22）