メディア – マップ

サイト上で、ビジネスに関する情報（電話番号、web サイト、レビュー、星評価など）の完全な範囲を購入者に提供します。

Googleの地図は通常、近くの観光スポット、公園、レストランなどを強調します。 この情報は、顧客が物理的な場所を特定し、旅行を計画するのに役立ちます。

新しいブラウザーウィンドウを開いてサイトを離れることなく、顧客が物理的な店舗の住所を簡単に見つけられるようにします。

実店舗のチェーンがある場合は、サイトにGoogleマップを追加すると、ハイライトされた商品の形でブランドの認知度と信頼性を高めるのに役立ちます。

に移動します Google Cloud Platform コンソール.

「プロジェクト」ドロップダウンをクリックし、API キーを追加するプロジェクトを選択または作成します。

API 資格情報を設定するには、次に従います。 指示 が含まれる Google Maps ドキュメント。

API キーをクリップボードにコピーします。

が含まれる Admin サイドバー、に移動 Stores > Settings>Configuration.

の下の左パネルで General、を選択​ Content Management.

を展開 Advanced Content Tools.

{width="600" modal="regular"}

コンテンツ管理の詳細ツールの設定オプションについて詳しくは、 設定リファレンスガイド.

の場合 Google Maps API Key ​手順 1 でコピーしたキーをペーストします。

クリック Test Key.

キーに問題がある場合は、に戻ります Google Maps 問題を解決する Platform サイト。 その後、もう一度試してください。

キーが確認されたら、 Save Config.

ページ、ブロック、またはダイナミックブロックを開いて、 Page Builder ワークスペース。

が含まれる Page Builder パネル、展開 Media をドラッグします。 Map ステージへのプレースホルダー。

{width="600" modal="regular"}

次の場合 Google Maps Platform がストア用に設定され、ストアの場所を示すマップが表示されます。

{width="600" modal="regular"}

次の場合 Google Maps お使いのストアに Platform がまだ設定されていない場合は、代わりにプレースホルダーマップが表示されます。

{width="600" modal="regular"}

マップコンテナにポインタを合わせてツールボックスを表示し、 設定 （ {width="20"} ） アイコンをクリックします。

の右上隅にある Edit Map ​ページ、クリック​ Add Location.

を入力 Location Name マップ上のピンに関連付けるピン。

カスタム位置に使用する位置座標を収集します。

または、で Position ボックスを選択すると、表示されたマップ内のピンをドラッグできます。

必要に応じて、に移動します Google Maps 新しいブラウザーウィンドウで、次のいずれかの方法を使用して座標を取得します。

{width="600" modal="regular"}

メソッド 1: URL からコピー

• 左上隅にアドレスを Search ボックスをクリックし、 検索 （ {width="20"} ） アイコンをクリックします。

• URL の座標をコピーしてメモ帳に貼り付けます。

メソッド 2: 「What's here?」からコピーします。

• マップ上の位置を示す赤いピンを右クリックし、 What’s here? メニューで変更できます。

• 表示されたラベルで、座標を含むテキストをコピーし、メモ帳に貼り付けます。

各フィールドに数字をコンマなしで入力します Coordinates ボックス。

また、マップ上で使用可能にする残りの情報を入力することもできます。

マップの場所に関連付ける他の情報を入力します。

完了したら、 Save.

新しい位置がマップおよび上のマップ位置グリッドに表示されます Edit Map ​ページ。

{width="600" modal="regular"}

が含まれる Admin サイドバー、に移動 Stores > Settings>Configuration.

の下の左パネルで General、を選択​ Content Management.

を展開 Advanced Content Tools.

の下 Google Maps Style テキストボックスで、 マップ スタイルを作成.

このアクションにより、が開きます Google Maps Platform スタイル設定ウィザード 別のタブで、のスタイルを定義できます Google Maps Platform プロジェクト。

クリック Create a Style 表示される指示に従います。

完了したら、 Finish.

完成したスタイルを JSON コードまたは URL として書き出すと、に追加できます。 Commerce 設定。

• JSON：生成された JSON コードを含んだボックスの下で、をクリックします Copy JSON.

• URL：生成された URL を含むボックスの下で、をクリックします Copy URL.

管理ブラウザータブに戻り、生成したコードまたは URL をに貼り付けます。 Google マップ スタイル ボックス。

URL を使用している場合は、 YOUR_API_KEY プレースホルダー Google Maps API キー。 この URL は、スタイル設定されたGoogle マップにリンクしています。

右上隅のをクリックします。 Save Config.

マップコンテナにカーソルを合わせると、ツールボックスが表示されるので、 設定 （ {width="20"} ） アイコンをクリックします。

必要に応じて基本設定を変更します。

を変更する Advanced ​必要に応じて設定します。

• コンテナに追加されるマップコンテンツの水平方向の位置を制御するには、 Alignment:

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  オプション	説明
  Default	現在のテーマのスタイル シートで指定されている線形の既定の設定を適用します。
  Left	指定したパディングの許容値を使用して、マップコンテナの左境界線に沿ってコンテンツを配置します。
  Center	指定したパディングに対する許容値を使用して、コンテンツをマップ コンテナの中央に位置合わせします。
  Right	指定したパディングの許容値を使用して、マップコンテナの右端に沿ってコンテンツを配置します。

• を Border マップ コンテナの 4 つの側面すべてに適用されるスタイル：

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
  オプション	説明
  Default	関連付けられたスタイル シートで指定されている既定の罫線スタイルを適用します。
  None	コンテナの境界線の表示はしません。
  Dotted	コンテナの境界線は点線で表示されます。
  Dashed	コンテナの境界線は破線で表示されます。
  Solid	コンテナの境界線は実線で表示されます。
  Double	コンテナの境界線は二重線で表示されます。
  Groove	コンテナの境界線は溝付き線で表示されます。
  Ridge	コンテナの境界線は、境界線として表示されます。
  Inset	コンテナの境界線は、インセットされた線として表示されます。
  Outset	コンテナの境界線は、先頭行として表示されます。

• 境界線のスタイルを Noneの場合は、次のボーダー表示オプションを入力します。

  {width="600" modal="regular"}

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  オプション	説明
  Border Color	見本を選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の 16 進数値を入力して、カラーを指定します。
  Border Width	境界線の幅のピクセル数を入力します。
  Border Radius	ピクセル数を入力して、境界線の各コーナーを丸めるために使用する半径のサイズを定義します。

• （オプション）の名前を指定します CSS classes を現在のスタイルシートからマップ コンテナに適用します。

  複数のクラス名はスペースで区切ります。

• 次の値をピクセル単位で入力 Margins and Padding マップ コンテナの外側の余白と内側のパディングを指定します。

  対応する各値をマップのコンテナ図に入力します。

  table 0-row-2 1-row-2 2-row-2 layout-auto
  コンテナ領域	説明
  Margins	コンテナのすべての側面の外側の端に適用される空白スペースの量。
  Padding	コンテナのすべての側面の内側の端に適用される空白のスペースの量です。

  note note
  NOTE
  マップコンテンツタイプには、パディングを使用できません。

完了したら、 Save 設定を適用し、 Page Builder ワークスペース。

が含まれる Admin サイドバー、に移動 Stores > Settings>Configuration.

の下の左パネルで General、を選択​ Content Management.

を展開 Advanced Content Tools.

必要に応じて、グリッドオプションを更新します。

• の場合 Default Column Grid Size：グリッドのデフォルトサイズの新しい値を入力します。

• の場合 Maximum Column Grid Size：デフォルトの最大グリッドサイズの新しい値を入力します。

{width="600" modal="regular"}

完了したら、 Save Config.