Google Maps ブロックを使用すると、インタラクティブなGoogleマップをSeedProdの任意のページに直接埋め込むことができます。ビジネスの場所、会議の会場、サービスエリアを表示したい場合でも、このブロックを使えば、訪問者が必要とする場所にライブマップを簡単に表示できます。
場所、ズームレベル、寸法、配置のコントロールを使用して、マップをページのレイアウトに完全に適合するように調整できます。埋め込みコードやAPI設定は不要です。
ページにGoogle Maps ブロックを追加する
SeedProdページにGoogle Maps ブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、Google Maps ブロックをページの目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、Google Maps ブロックをクリックして設定を開きます。コンテンツタブで、マップの場所と表示寸法を設定します。
Googleマップ：
- 場所: マップに表示したい住所または場所の名前を入力します。完全な番地、都市名、ビジネス名、またはGoogle Mapsで認識できる任意の場所を使用できます。
- ズーム: マップのズームレベルを0（世界全体）から20（通りの詳細レベル）まで設定します。値10は都市レベルの表示を示し、それより高い値は指定された場所にズームインします。
- 幅（%）: マップの幅をコンテナのパーセンテージで0〜100％まで設定します。
- 高さ（px）: マップの高さを0〜470pxのピクセル単位で設定します。
- 配置: セクション内のマップの水平方向の配置を左、中央、右から設定します。
ステップ3：デザインをカスタマイズする
詳細設定タブでは、Google Maps ブロックの視覚的な外観とスペーシングをカスタマイズできます。
スタイル:
- 影: マップ埋め込みの周りにドロップシャドウを追加します。なし、ヘアライン、小、中、大、特大、超特大から選択して、周囲のコンテンツからの奥行きと視覚的な分離を追加します。
間隔：
- マージン: Google Maps ブロックの周囲の外部スペーシング（上、右、下、左）を制御します。デスクトップ、タブレット、モバイルのデバイスごとの値をサポートします。
- パディング: Google Maps ブロックの内部スペーシング（上、右、下、左）を調整します。デスクトップ、タブレット、モバイルのデバイスごとの値をサポートします。
属性:
- CSS ID: SeedProdがカスタムスタイリングまたはJavaScriptターゲティングのために自動生成したGoogle Maps ブロックの一意の識別子を表示します。
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するためにカスタムCSSクラスを追加します。
- カスタム属性: ブロックラッパー要素に任意のHTML属性を追加します。属性名を改行し、attribute-name|valueの形式で入力します。
デバイス表示:
- デスクトップで非表示: デスクトップ画面でGoogle Maps ブロックを非表示にします。
- タブレットで非表示: タブレットデバイスでGoogle Maps ブロックを非表示にします。
- モバイルで非表示: モバイルデバイスでGoogle Maps ブロックを非表示にします。
アニメーション効果:
- 表示アニメーション: バウンス、フェードイン、ズームイン、ローテートインなど、Google Maps ブロックが表示領域にスクロールしたときに再生されるアニメーション効果を選択します。
ステップ4：変更を保存
Google マップブロックの設定と外観のカスタマイズが完了したら、作業内容を保存してください。
Google マップブロックをページに追加しました！ライブマップを埋め込むことで、訪問者はページから離れることなく、あなたの場所を見つけたり、道順を取得したり、どこにあるかを理解したりするのが簡単になります。ズームレベルと寸法を試して、デザインに最適なレイアウトを見つけてください。