テーマオプション Google マップ

このコンテンツでは、Avadaの固定ページで使用できるテンプレートの1つ「問い合わせ」ページに関する【テーマオプション Google マップ】全12のオプションについて解説をしています。

このオプションは、テンプレート「問い合わせ」ページに表示されるGoogle マップの住所や大きさなどを設定します。

なお、このページでは【Google Map】ショートコードを使用してデモを作成していますが、このページで解説している各オプションは「問い合わせ」テンプレートのみで反映されます。ショートコードで反映される（使用する）のは、【1.Google Maps API Key / APIキー】のみとなります。

表示されるGoogle マップをデフォルトから変更したい場合は、テーマオプション Google マップのスタイリングをご覧ください。

サクッと画像で概要を見たい方はこちら

1.Google Maps API Key / APIキー

Google マップを使用するには、APIキーが必要になります。Google API キーを取得するから、APIキーを取得し、このオプションに貼り付けます。

APIキーは、テンプレート「問い合わせ」ページのGoogle マップだけでなく、ショートコード「Google Map」でも使用します。そのため、テンプレートを使わない場合でも、ショートコードでGoogle マップを使用する場合はこちらにAPIキーを入力しておきましょう。

2.Google Map Address / 住所

このオプションは、Google マップで表示したい住所を入力します。

住所に使う数字は全角・半角どちらでも大丈夫です。
また、住所の代わりに緯度・経度を入力してもかまいません。
例:国会議事堂
「東京都千代田区永田町1丁目7-1 」or 「 35.6759213,139.7449252 」

なお、複数の住所をマップに表示させたい場合は、【 | 】バーティカルバーで住所を区切ります。
例:国会議事堂財務省厚生省
東京都千代田区永田町1-7-1|東京都千代田区霞が関3-1-1|東京都千代田区霞が関1-2-2

このセクションのマップでは複数表示させています。

3.Google Map Type / マップの種類

Roadmap　道路地図

Satellite　衛星写真

Hybrid　通常と衛星の複合ビュー

Terrain　地形情報に基づいた物理地図

このオプションは、Google マップの種類を以下の4つから選択します。

Roadmap　道路地図
Satellite　衛星写真
Hybrid　通常と衛星の複合ビュー
Terrain　地形情報に基づいた物理地図

4.Google Map Dimensions / マップのサイズ

このオプションは、Google マップの大きさを設定します。

幅は%単位の指定ができますが、高さには%は使えないので注意しましょう。
○ 幅100% 高さ500px
× 幅100% 高さ 50%

5.Google Map Top Margin / トップマージン

このオプションは、Google マップの幅が100%ではない場合の、メニューまたはページタイトルバーとGoogle マップまでのマージンを設定します。

画像では、黄色部分がマージンとなっており100pxで設定しています。

なお、幅を100%で設定している場合のマージントップは0となります。

6.Map Zoom Level / マップのズームレベル

ズームレベル 13

ズームレベル 17

このオプションは、マップが読み込まれた際のズームレベルを設定します。大きい数値であるほど拡大して表示されます。

7.Address Pin / アドレスピン

このオプションを有効にすると、住所の位置を指すマップマーカーを表示します。

マップマーカーをオリジナルにしたいなどのカスタムについては、テーマオプション Google マップのスタイリング【7.Custom Marker Icon / カスタムマーカーアイコン】から設定できます。

8.Address Pin Animation / アニメーション

このオプションを有効にすると、マップマーカーを【theme】としている場合に、マーカーが上から落ちてくるようなアニメーションになります。

9.Map Popup On Click / ポップアップ

オン有効クリックで表示

オフ無効最初から表示

このオプションを有効にすると、マップマーカーをクリックで住所またはインフォボックスを表示します。オフにしている場合は、デフォルトで表示となります。

ポップアップされる内容については、テーマオプション Google マップのスタイリング【4.Info Box Content / コンテンツ】で変更することができます。

10.Map Zoom With Scrollwheel / スクロールでズーム

このオプションを有効にすると、マップのズームレベルの調整をスクロールで行うことができるようになります。

ただし、【4.Google Map Dimensions / マップのサイズ】で高さをかなり高く取っている場合（特にモバイル）は、地図から抜けなくなってしまう可能性があるので注意しましょう。高さをある程度取る場合はこの設定はオフにし、【12.Map Zoom & Pan Control Icons / コントロールアイコンの表示】を有効にし、ズームレベルを調整できるアイコンを表示しておくといいでしょう。