Google Mapsブロックを使用すると、インタラクティブなGoogleマップをSeedProdの任意のページに直接埋め込むことができます。事業所の所在地、会議会場、サービスエリアを表示したい場合でも、このブロックを使えば訪問者が必要な場所にリアルタイムの地図を簡単に表示できます。
位置、ズームレベル、サイズ、配置のコントロールにより、ページレイアウトに完璧に収まるように地図を調整できます。埋め込みコードやAPI設定は不要です。
Google マップ ブロックをページに追加する
SeedProdページにGoogle Mapsブロックを追加するには、以下の手順に従ってください：
ステップ1: ブロックを追加する
デザイン ＞ ブロック の下にあるGoogle マップブロックを、ページの目的のセクションにドラッグ＆ドロップします。
ステップ2: コンテンツ設定の構成
追加後、Google Mapsブロックをクリックして設定を開きます。「コンテンツ」タブで、地図の位置と表示サイズを設定します。
Google マップ:
- 場所:地図に表示したい住所または地名を入力してください。完全な住所、都市名、企業名、またはGoogleマップで認識可能な場所を使用できます。
- ズーム:地図のズームレベルを0（世界全体表示）から20（ストリートレベルの詳細表示）まで設定します。値10では都市レベルの表示となり、より高い値では指定位置に近づいて表示されます。
- 幅（%）：マップの幅をコンテナの幅に対する割合（0～100%）で設定します。
- 高さ（px）：マップの高さをピクセル単位で設定します。0～470pxの範囲で指定してください。
- 配置:セクション内の地図の水平方向の配置を設定します — 左、中央、または右。
ステップ3：デザインのカスタマイズ
[詳細設定]タブでは、Google マップ ブロックの外観や間隔をカスタマイズできます。
スタイル:
- シャドウ：マップ埋め込みの周囲にドロップシャドウを追加します。周囲のコンテンツとの奥行きと視覚的な分離を加えるため、[なし]、[ヘアライン]、[小]、[中]、[大]、[特大]、[2倍特大]から選択してください。
スペース:
- マージン:Google Maps ブロックの周囲の外側スペース（上、右、下、左）を制御します。デスクトップ、タブレット、モバイルごとにデバイス別の値をサポートします。
- パディング:Google Maps ブロック内の内側の間隔（上、右、下、左）を調整します。デスクトップ、タブレット、モバイルごとに個別の値を設定できます。
属性：
- CSS ID:Google Maps ブロックの自動生成された一意の識別子を表示します。SeedProdによってカスタムスタイリングやJavaScriptターゲティング用に自動的に作成されます。
- カスタムクラス：テーマやカスタムCSSから特定のスタイルを適用するためのカスタムCSSクラスを追加します。
- カスタム属性:ブロックラッパー要素に任意のHTML属性を追加します。各属性は改行で区切り、以下の形式で入力してください: 属性名|値。
デバイスの可視性:
- デスクトップで非表示:デスクトップ画面でGoogleマップブロックを非表示にします。
- タブレットで非表示:タブレット端末でGoogleマップブロックを非表示にします。
- モバイルで非表示:モバイル端末でGoogleマップブロックを非表示にします。
アニメーション効果：
- エントランスアニメーション:Google Maps ブロックが画面にスクロールインする際に再生されるアニメーション効果を選択します。バウンス、フェードイン、ズームイン、回転インなど、多数の効果が用意されています。
ステップ4: 変更を保存する
Google マップ ブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
Googleマップブロックをページに追加できました！ライブマップを埋め込むことで、訪問者はページを離れることなく、簡単にあなたの場所を見つけ、道順を確認し、拠点がどこにあるかを把握できます。ズームレベルやサイズを調整して、デザインに最適なレイアウトを見つけてください。