メディア – マップ

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

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

新しいブラウザーウィンドウを開いてサイトを離れることなく、実店舗のアドレスを簡単に見つけることができます。

実店舗がチェーン展開されている場合、サイトにGoogleマップを追加することで、強調されている商品の形でブランド認知度と信頼性を高めることができます。

Google Cloud Platform Consoleに移動します。

プロジェクト ドロップダウンをクリックし、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?」を選択します。

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

各​Coordinates ボックスに、コンマを含めずに数値を入力します。

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

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

完了したら、Save​をクリックします。

新しい場所がマップと​ Edit Map ​ページのマップ場所グリッドに表示されます。

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

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

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

Advanced Content Tools​を展開します。

Google Maps Style テキストボックスで、​ マップスタイルの作成をクリックします。

このアクションを実行すると、Google Maps Platform Styling Wizardが別のタブで開き、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	コンテナの境界線が2行で表示されます。
  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
  パディングは、マップ コンテンツ タイプでは使用できません。

完了したら、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​をクリックします。