2020/02/28 情報を更新いたしました。

会社やお店の地図をサイトに掲載するときにGoogle Maps(グーグルマップ)を利用されている方は多いと思います。Google Mapsをデフォルトのデザインで利用する方も多いと思いますが、デザインをカスタマイズされている方も中にはいらっしゃいます。ただ、カスタマイズするとなると少々の知識が必要になります。

そんな時に便利なのがWordPressプラグイン「TCD Google Maps」です。豊富なデザインが揃っており、サイズやズームの度合い、住所を管理画面から変更し、ショートコードで記事中に簡単に入れることが出来ます。

「TCD Google Maps」は、TCD開発チームが制作したプラグインです。サイトに合わせたおしゃれなデザインのGoogle Mapsを利用したい場合にご利用下さい。

777_250

ここでは、プラグインのダウンロード方法や使用方法をご紹介いたします。

「TCD Google Maps」でこんなことが出来ます!

  • デザインが豊富に揃っている(Discreet,Flat pale,Ultra lightなど全10タイプ)
  • ショートコードで記事中に簡単に表示できる
  • 住所を入力するだけで表示
  • 縦・横サイズ・ズームの調整機能
  • ボーダーの表示、非表示
  • 中央表示の選択

TCD GoogleMapプラグインのインストール

管理画面から「TCD」を検索してインストールして下さい。
tgm

もしくは、下記のボタンからプラグインをダウンロードし、「プラグイン」→「新規追加」→「プラグインのアップロード」よりwp-content/pluginsディレクトリにインストールし、有効化してください。

TCD Google Maps

TCD Google Mapsプラグインの設定方法

解説動画もアップしておりますので、よろしければどうぞ。

プラグインを有効化すると、設定画面に「TCD Google Maps」の項目が表示されます。

tcdgooglemaps02

クリックすると以下の設定画面が表示されます。
screenshot-1

住所の入力

住所入力
表示したい住所を入力してください。

APIキーの設定※2016/7/7 Ver1.1にて追加

TGM015
Google Maps APIキーを入力してください。

Google Mapsの仕様変更により、新規サイトでGoogle Mapsを使用する場合はAPIキーの設定が必須になりました。Google Maps APIキーの取得方法については下記でご案内しております。
Google Mapsの表示にはAPI登録が必須になりました

ズーム設定

ズーム設定
地図のズームレベルを選択します。
左端(世界地図) 
left
真ん中(都市)
middle
右端(詳細)
right

地図の横幅設定

横幅設定
地図の横幅(ピクセル値)を設定して下さい。レスポンシブデザインの場合はフル幅にチェックを入れて下さい。widthが100%で表示されます。

地図の縦幅設定

縦幅設定
地図の縦幅(ピクセル値)を設定してください。

その他の設定

その他の設定
マップコントロールを表示する:ズームやストリートビューなどのコントロールを表示します。
地図の外側に枠線を表示する:地図の外枠に白の枠が表示されます。
中央揃え:地図の表示位置を中央にします。
ドラッグを許可する:地図がドラックによって動くようになります。

テーマ選択※2016/7/7 Ver1.1にて10種類追加

20種類のテーマからお好みの物を選択ください。
screenshot-3

デフォルト

tgm10

Discreet

tgm10

Flat pale

tgm10

Just places

tgm10

Clean cut

tgm10

Even lighter

tgm10

Ultra light

tgm10

Light monochrome

tgm10

Red hat

tgm10

Light grey and blue

tgm10

Elevation

tgm10

↓ここから、Ver1.1にて追加されたテーマ

Grey scale

greyscale

Lightgrey

light-gray

Blue essence

blue-essence

Bentley

bentley

My blue water

my-blue-water

Girly

girly

Flat map with labels

flat-map-with-labels

Fashion flat

fashion-flat

Yellow gray

yellow-gray

Train lines

train-lines-bg

プレビュー

プレビュー
設定したデータが随時プレビュー表示されます。

ショートコード表示

ショートコード表示
設定したデータに基づきショートコードが表示されます。これを投稿画面や固定画面に貼付けてください。

記事への設置方法

それでは、先ほどのショートコードを実際に貼付けてみます。

投稿画面より下記のようにショートコードを記載します。
投稿画面

表示すると、
プレビュー画面

このようにカスタマイズされた地図が簡単に作成することができます。

TCD Google Maps

Googleマップ関連のプラグイン