メディア – マップ

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

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

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

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

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

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

API 資格情報を設定するには、 のドキュメントの手順 Google Maps に従ってください。

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

管理者 サイドバーで、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"}

管理者 サイドバーで、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	指定したパディングの許容値を使用して、マップコンテナの右端に沿ってコンテンツを配置します。

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

  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 ワークスペースに戻ります。

管理者 サイドバーで、Stores/Settings/Configuration ​に移動します。

General ​の下の左パネルで、「Content Management」を選択します。

Advanced Content Tools を展開します。

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

• Default Column Grid Size の場合、グリッドの既定のサイズとして新しい値を入力します。

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

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

完了したら、「Save Config」をクリックします。