DocumentationCommercePage Builder

Media - Map

Last update: Thu Sep 07 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • Intermediate
  • User

Use the Map content type to add a map from Google Maps Platform to the Page Builder stage. For example, you might add a map to a block, and then add the block to the About Us and Contact Us pages.

To get the most from Google Maps Platform, you can customize the map, highlight your store locations, and use Google Places to add rich information about your store to all Google Maps.

Benefits of embedding a Google map

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

  2. 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.

  3. 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.

  4. 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.

Example storefront - map with location

NOTE
If you are making significant changes to Page Builder content, it is recommended that you increase the Admin Session Lifetime to prevent the session from timing out while you work.

Map toolbox

The map toolbox appears when you hover over the map container.

Tool
Icon
Description
Move
Move icon {width="25"}
Moves the map to another position on the stage.
(label)
Map
Identifies the current content container as a map. Hover over the map container to see the toolbox.
Settings
Settings icon {width="25"}
Opens the Edit Map page, where you can change the properties of the map and container.
Hide
Hide icon {width="25"}
Hides the current map.
Show
Show icon {width="25"}
Shows the hidden map.
Duplicate
Duplicate icon {width="25"}
Makes a copy of the map.
Remove
Remove icon {width="25"}
Deletes the map from the stage.
NOTE
Hidden elements are stored in the database and invisible to customers. However, these elements are visible to search engines and other bots that crawl your site. They are also returned as part of the content if requested through an API call with an attribute of invisibility, unless you remove them from the stage.

Configure Google Maps for your Admin

Before adding a map, you must first open an account for a free trial of Google Maps Platform. The free trial lasts for 12 months and includes a $300 credit. If you use up your credit, Google does not bill your account without your permission.

Step 1: Get your Google Maps API key

Depending on whether you already have a Google Maps key, use one of the following procedures to get the API key required for configuration. To set up a Google Maps key, you must be a site administrator authorized to enable billing for your account. If you’re not ready to set up a Google Maps Platform account, you can skip this step and use the placeholder map for now.

  1. Go to the Google Cloud Platform Console.

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

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

  4. Copy your API Key to the clipboard.

Step 2: Configure Google Maps in Commerce

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

  2. In the left panel under General, choose Content Management.

  3. Expand Expansion selector Advanced Content Tools.

    Advanced Content Tools {width="600" modal="regular"}

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

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

  5. 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.

  6. After your key is verified, click Save Config.

Add a map to the stage

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

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

    Dragging a map to the stage {width="600" modal="regular"}

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

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

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

    Google Maps Placeholder {width="600" modal="regular"}

Add a custom map location

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

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

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

  4. 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:

    Map 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 ( Search icon {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.

  5. 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.

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

    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 layout-auto
    Option Description
    Phone Number The telephone number of the location.
    Street Address The street address of the location.
    City The city of the location.
    Region/State The region or state of the location.
    Zip/Postal Code The ZIP or postal code of the location.
    Country The country of the location.
    Comment Any comments that you want to include.

  7. When complete, click Save.

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

    Page Builder - maps location grid {width="600" modal="regular"}

Style the map styling

Use the Google Maps Platform Styling Wizard to apply a one of six predefined themes or to create a custom theme. You can generate a JSON file with the map style properties or a link to the styled map.

Change the map style

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

  2. In the left panel under General, choose Content Management.

  3. Expand Expansion selector Advanced Content Tools.

  4. 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.

  5. Click Create a Style and follow the provided instructions.

    When complete, click Finish.

  6. 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.

  7. 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.

  8. In the upper-right corner, click Save Config.

Change the map settings

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

  2. Change the basic settings as needed:

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Option Description
    Height Specifies the height of the displayed map in pixels.
    Show Controls Determines if the standard Google Map controls appear.

  3. 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:

      Border Color {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.

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

Change the grid size

The grid size determines the size of the map related to a column on the Page Builder stage. By default, the map is 12 columns wide, with a maximum of 16 columns.

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

  2. In the left panel under General, choose Content Management.

  3. Expand Expansion selector Advanced Content Tools.

  4. Update the grid options as needed:

    note note
    NOTE
    If needed, clear the Use system value checkbox to modify these settings.

    • 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.

    Column grid size settings {width="600" modal="regular"}

  5. When complete, click Save Config.

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d