Media - Map

Provides buyers with a full scope of information about your business (phone number, website, reviews, star ratings, and so on) right on your site.

A Google map usually highlights nearby attractions, parks, restaurants, and so on. This information helps your customers determine your physical location and plan their trip.

Makes it easy for customers to find the address for your physical store without the need to open a new browser window and leave your site.

If you have a chain of physical stores, adding a Google Map on your site helps to increase your brand awareness and credibility in the form of highlighted items.

Go to the Google Cloud Platform Console.

Click the project drop-down and select or create the project for which you want to add an API key.

To configure your API credentials, follow the instructions in the Google Maps documentations.

Copy your API Key to the clipboard.

In the Admin sidebar, go to Stores > Settings > Configuration.

In the left panel under General, choose Content Management.

Expand Advanced Content Tools.

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

For more information about the Content Management Advanced Tools configuration options, see the Configuration Reference Guide.

For Google Maps API Key, paste the key you copied in step 1.

Click Test Key.

If there is a problem with your key, return to the Google Maps Platform site to resolve the problem. Then, try again.

After your key is verified, click Save Config.

Open the page, block, or dynamic block to the Page Builder workspace.

In the Page Builder panel, expand Media and drag a Map placeholder to the stage.

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

If Google Maps Platform is configured for your store, a map appears for your store location.

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

If Google Maps Platform is not yet configured for your store, a placeholder map appears instead.

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

Hover over the map container to display the toolbox and choose the Settings ( {width="20"} ) icon.

In the upper-right corner of the Edit Map page, click Add Location.

Enter the Location Name that you want to be associated with the pin on the map.

Collect the location coordinates that you want to use for the custom location.

Alternatively, in the Position box, you can drag the pin in the displayed map.

If necessary, go to Google Maps in a new browser window and use one of the following methods to get the coordinates:

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

Method 1: Copy from URL

• In the upper-left corner, enter the address in the Search box and click the Search ( {width="20"} ) icon.

• Copy the coordinates in the URL and paste them into a notepad.

Method 2: Copy from “What’s here?”

• Right-click the red pin that marks the location on the map and choose What’s here? in the menu.

• In the displayed label, copy the text, including the coordinates and paste the text into a notepad.

Enter the numbers, without the comma, in each of the Coordinates boxes.

You can also enter as much of the remaining information that you want to be available on the map.

Compete any other information that you want to associate with the map location:

When complete, click Save.

The new location appears in the map and in the map location grid on the Edit Map page.

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

In the Admin sidebar, go to Stores > Settings > Configuration.

In the left panel under General, choose Content Management.

Expand Advanced Content Tools.

Under the Google Maps Style text box, click Create Map Style.

This action opens the Google Maps Platform Styling Wizard in a separate tab, where you can define a style for your Google Maps Platform project.

Click Create a Style and follow the provided instructions.

When complete, click Finish.

Export the completed style as JSON code or as a URL so that you can add it to the Commerce configuration.

• JSON: Below the box with the generated JSON code, click Copy JSON.

• URL: Below the box with the generated URL, click Copy URL.

Return to your Admin browser tab and paste the generated code or URL into the Google Maps Style box.

If you are using a URL, replace the YOUR_API_KEY placeholder with your Google Maps API key. This URL links to your styled Google Map.

In the upper-right corner, click Save Config.

Hover over the map container to display the tool box and choose the Settings ( {width="20"} ) icon.

Change the basic settings as needed:

Modify the Advanced settings as needed:

• To control the horizontal positioning of the map content that added to the container, choose an Alignment:

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  Option	Description
  Default	Applies the alignment default setting that is specified in the style sheet of the current theme.
  Left	Aligns the content along the left border of the map container, with allowance for any padding that is specified.
  Center	Aligns the content in the center of the map container, with allowance for any padding that is specified.
  Right	Aligns the content along the right border of the map container, with allowance for any padding that is specified.

• Set the Border style applied to all four sides of the map container:

  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
  Option	Description
  Default	Applies the default border style that is specified by the associated style sheet.
  None	Does not provide any visible indication of the container borders.
  Dotted	The container border appears as a dotted line.
  Dashed	The container border appears as a dashed line.
  Solid	The container border appears as a solid line.
  Double	The container border appears as a double line.
  Groove	The container border appears as a grooved line.
  Ridge	The container border appears as a ridged line.
  Inset	The container border appears as an inset line.
  Outset	The container border appears as an outset line.

• If you set a border style other than None, complete the border display options:

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

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Option	Description
  Border Color	Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value.
  Border Width	Enter the number of pixels for the border line width.
  Border Radius	Enter the number of pixels to define the size of the radius that is used to round each corner of the border.

• (Optional) Specify the names of CSS classes from the current style sheet to apply to the map container.

  Separate multiple class names with a space.

• Enter values, in pixels, for the Margins and Padding to specify the outer margins and inner padding of the map container.

  Enter each corresponding value in the map container diagram.

  table 0-row-2 1-row-2 2-row-2 layout-auto
  Container area	Description
  Margins	The amount of blank space that is applied to the outside edge of all sides of the container.
  Padding	The amount of blank space that is applied to the inside edge of all sides of the container.

  note note
  NOTE
  Padding is not available for the Map content type.

When complete, click Save to apply the settings and return to the Page Builder workspace.

In the Admin sidebar, go to Stores > Settings > Configuration.

In the left panel under General, choose Content Management.

Expand Advanced Content Tools.

Update the grid options as needed:

• For Default Column Grid Size, enter a new value for the default size of the grid.

• For Maximum Column Grid Size, enter a new value for the default maximum grid size.

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

When complete, click Save Config.