テーマオプション Google マップのスタイリング

Google Map Styling

ホーム/Theme Options/Contact Form/テーマオプション Google マップのスタイリング
  • テーマオプション Google マップのスタイリング

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

このオプションを使用することで、デフォルトのGoogle マップのデザインを自由に変更することができます。

なお、このページでは【Google Map】ショートコードを使用してデモを作成していますが、このページで解説している各オプションは「問い合わせ」テンプレートのみで反映されます。また、Google Mapの使用にはAPIキーの取得が必要です。

APIキーの取得などGoogle マップの各設定については、テーマオプション Google マップで解説していますので合わせてご覧ください。

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

1.Select the Map Styling / マップスタイルの選択

このオプションは、Google マップのスタイルを以下の3つから選択します。

  1. デフォルト
  2. テーマ
  3. カスタム

1.デフォルトは、よく見かけるGoogle マップの初期設定です。
2.テーマは、Avadaオリジナルのマーカー・カラー・インフォボックスを予め設定しています。
3.カスタムは、マーカー・カラー・インフォボックスを自由に変更することができます。

【3.カスタム】を選択すると以降のオプション選択が表示されます。

デフォルト

テーマ

カスタム

2.Map Overlay Color / オーバーレイカラー

このオプションは、オーバーレイによってマップカラーを変更します。

これは、#81d742で設定したマップとなります。

3.Info Box Styling / インフォボックスのスタイリング

このオプションは、マップマーカーをクリックした時に表示されるインフォボックスのスタイリングを、デフォルトまたはカスタムから選択します。
カスタムを選択すると以降のオプションが表示されます。

4.Info Box Content / コンテンツ

このオプションは、インフォボックスに表示される内容を入力します。なお、このボックスに何も入力しない場合は住所が表示されます。

マーカーをクリックすると

国会議事堂は、国会が開催される建物。現在の建物は1936年に帝国議会議事堂として建設された。東京都千代田区永田町一丁目にある。建物は左右対称形を成しており、正面に向かって左側に衆議院、右側に参議院が配置されている。wikipedia

と表示されます。

5.Info Box Background Color / 背景色

このオプションは、インフォボックスの背景色を設定します。

6.Info Box Text Color / テキストカラー

このオプションは、インフォボックスのテキストカラーを設定します。

7.Custom Marker Icon / カスタムマーカーアイコン

このオプションは、マーカーアイコンをカスタムします。

使い方は、WordPressのメディアにアップした画像のURLを入力します。このセクションのマップのように複数の住所を表示する場合は、【 | 】(バーティカルバー)で区切ることで、それぞれの住所毎に違うアイコンを表示させることもできます。また、【theme】と入力することでAvadaオリジナルのマーカーアイコンを使用できます。

コメントする