2024/11/15 情報を更新いたしました。
会社やお店の地図をサイトに掲載するときにGoogle Maps（グーグルマップ）を利用されている方は多いと思います。Google Mapsをデフォルトのデザインで利用する方も多いと思いますが、デザインをカスタマイズされている方も中にはいらっしゃいます。ただ、カスタマイズするとなると少々の知識が必要になります。
そんな時に便利なのがWordPressプラグイン「TCD Google Maps」です。豊富なデザインが揃っており、サイズやズームの度合い、住所を管理画面から変更し、ショートコードで記事中に簡単に入れることが出来ます。
「TCD Google Maps」は、TCD開発チームが制作したプラグインです。サイトに合わせたおしゃれなデザインのGoogle Mapsを利用したい場合にご利用下さい。
ここでは、プラグインのダウンロード方法や使用方法をご紹介いたします。
目次
「TCD Google Maps」でこんなことが出来ます！
- デザインが豊富に揃っている（Discreet,Flat pale,Ultra lightなど全10タイプ）
- ショートコードで記事中に簡単に表示できる
- 住所を入力するだけで表示
- 縦・横サイズ・ズームの調整機能
- ボーダーの表示、非表示
- 中央表示の選択
TCD GoogleMapプラグインのインストール
再度公開されるまでは以下のリンクからプラグインをインストールしてください。
下記のボタンからプラグインをダウンロードし、「プラグイン」→「新規追加」→「プラグインのアップロード」よりwp-content/pluginsディレクトリにインストールし、有効化してください。
※プラグインのダウンロード前に必ずご利用規約をご確認ください。ダウンロードをもってご利用規約に同意いただいたものと見做します。
- 1. 当プラグインはGPLによってライセンスされています。（100％GPL）
- 2. 当プラグインの利用及び改変は利用者の責任において行うものとし、当社は一切の保証を行いません。
- 3. 当社は当プラグインについて、エラー、バグ、不具合またはセキュリティー上の欠陥が存しないこと、利用者が改変を行った当プラグインが動作すること、利用者の特定の目的に適合すること、利用者が期待する性質及び商品的価値を有すること並びに利用者に適用される法令または内部規則等に適合していること等について、明示または黙示を問わず一切の保証を行いません。不具合等が発見された場合にはできる限り当プラグインの修正に努めますが、全ての修正をお約束するものではありません。
- 4. 当プラグインの利用または改変によって生じる結果について、その理由や性質の如何にかかわらず、当社は利用者に対して何ら責任を負わないものとします。
- 5. 当プラグインの利用または改変に関連して利用者または第三者に生じた損害について、当社はいかなる場合においても責任を負わないものとします。
TCD Google Mapsプラグインの設定方法
解説動画もアップしておりますので、よろしければどうぞ。
プラグインを有効化すると、設定画面に「TCD Google Maps」の項目が表示されます。
クリックすると以下の設定画面が表示されます。
住所の入力
表示したい住所を入力してください。
APIキーの設定※2016/7/7 Ver1.1にて追加
Google Maps APIキーを入力してください。
Google Mapsの仕様変更により、新規サイトでGoogle Mapsを使用する場合はAPIキーの設定が必須になりました。Google Maps APIキーの取得方法については下記でご案内しております。
Google Mapsの表示にはAPI登録が必須になりました
ズーム設定
地図のズームレベルを選択します。
左端（世界地図）
真ん中（都市）
右端（詳細）
地図の横幅設定
地図の横幅(ピクセル値)を設定して下さい。レスポンシブデザインの場合はフル幅にチェックを入れて下さい。widthが100%で表示されます。
地図の縦幅設定
地図の縦幅（ピクセル値）を設定してください。
その他の設定
マップコントロールを表示する：ズームやストリートビューなどのコントロールを表示します。
地図の外側に枠線を表示する：地図の外枠に白の枠が表示されます。
中央揃え：地図の表示位置を中央にします。
ドラッグを許可する：地図がドラックによって動くようになります。
テーマ選択※2016/7/7 Ver1.1にて10種類追加
20種類のテーマからお好みの物を選択ください。
デフォルト
Discreet
Flat pale
Just places
Clean cut
Even lighter
Ultra light
Light monochrome
Red hat
Light grey and blue
Elevation
↓ここから、Ver1.1にて追加されたテーマ
Grey scale
Lightgrey
Blue essence
Bentley
My blue water
Girly
Flat map with labels
Fashion flat
Yellow gray
Train lines
プレビュー
設定したデータが随時プレビュー表示されます。
ショートコード表示
設定したデータに基づきショートコードが表示されます。これを投稿画面や固定画面に貼付けてください。
記事への設置方法
それでは、先ほどのショートコードを実際に貼付けてみます。
投稿画面より下記のようにショートコードを記載します。
表示すると、
このようにカスタマイズされた地図が簡単に作成することができます。
Googleマップ関連のプラグイン
ウェブサイト上にお店や会社の所在地を地図で表示したり、旅の紀行記や観光案内のページに地図を入れたりするケースは多くみられます。Googleマップを使って地図を挿入する企業も多いことでしょう。 WP Google Mapsプラグインは独自のマップを作成できる高度な機能を搭載していますが、実際のと...
