Map

Use the Map content type to add a map from Google Maps Platform to the 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 location(s), and use Google Places to add rich information about your store to all Google maps.

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

Map with Location

Step 1: Configure Google Maps

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

  2. In the panel on the left under General, choose Content Management and scroll down to the Advanced Content Tools section. Then, complete the applicable instructions:

    Advanced Content Tools

    Have a Google Maps Key

    • Paste your Google Maps API Key.

    • Click Test Key.

    • Do one of the following:

      • After your key is verified, click Save Config.

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

    Need a Google Maps Key

    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 at this time, you can skip this step and use the placeholder map for now.

    • Click Get API Key.

    • Follow the instructions to configure your Google Maps Platform account and billing.

    • Copy your API Key. Then, complete the previous instructions to enter and test your key.

  3. When complete, click Save Config.

    To learn how to configure styles for your Google map, see Styling the Map.

Step 2: Add a Google Map

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

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

    Drag Map to Stage

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

    Google Maps

    If Google Maps Platform isn’t yet configured for your store, a placeholder map appears instead.

    Google Maps Placeholder

Step 3: Add a Custom Location

  1. Hover over the map container. Then, choose Settings () in the toolbox.

  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. Enter the GPS Coordinates of the location.

    If necessary, use one of the following methods to get the coordinates:

    Map Coordinates

    Method 1: Copy from URL

    • In a new browser window, go to Google Maps.

    • In the upper-left corner, enter the address in the Search box and click Search ().

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

      Copy Coordinates from URL

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

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

      What’s here?

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

      Popup with Coordinates

  5. Return to the Add Location page and enter the numbers, without the comma, in the two Coordinates fields. Then, enter as much of the remaining information that you want to be available on the map.

  6. When complete, click Save.

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

    Location Grid

  7. On the Save menu, choose Save & Close.

Styling the Map

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

To change the map style

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

  2. In the panel on the left under General, choose Content Management and scroll down to the Advanced Content Tools section.

  3. In the note under the Google Maps Style field, click Create Map Style.

    Google Platform Maps Styling Wizard

  4. Click Create a Style. Then, do the following:

    • In the panel on the left, use the sliders to Adjust the density of roads, landmarks, and labels on the map.

    • Under Select theme, choose one of the predefined themes.

      Select a Predefined Theme

    • At the bottom of the panel, click More Options. Choose the Feature type and Element type that you want to style. Then in the Stylers column, configure the properties as needed.

    • When complete, click Finish.

      You can export the completed style as JSON code or as a URL. Follow the instructions for your application.

      Export Style

    JSON

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

    • Return to the Content Management section of the Magento Configuration. In the Advanced Content Tools section, paste the code into the Google Maps Style field.

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

    URL

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

    • Paste the generated URL into a text editor.

    • Replace the YOUR_API_KEY placeholder with your Google Maps API key.

    You can use this URL to link to your styled Google Map.

To 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. To change the grid size, do the following:

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

  2. In the panel on the left under General, choose Content Management and scroll down to the Advanced Content Tools section. Then, do the following:

    • Clear the checkbox after the Default Column Grid Size field. Then, enter a new value for the default size of the grid.

    • Clear the checkbox after the Maximum Column Grid Size field. Then, enter a new value for the default maximum grid size.

    Column Grid Size

  3. When complete, click Save Config.

Map Toolbox

Tool Icon Description
Move Move icon Moves the map to another position on the stage.
(label) MAP Identifies the current content container as an map. Hover over the map container to see the toolbox.
Settings Settings icon Opens the Edit Map page, where you can change the properties of the map and container.
Hide Hide icon Hides the current map.
Show Show icon Shows the hidden map.
Duplicate Duplicate icon Makes a duplicate copy of the map.
Remove Remove icon Deletes the map from the stage.

Map Settings

Setting Description
Map Locations A grid that lists the current map locations.
Add Location Adds a custom location to the map with the following information:
Position - A map with a pin that marks the location.
Location Name - The name that you want to appear on the map.
Coordinates - GPS coordinates for the location latitude and longitude.
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.
Map Height Specifies the height of the map in pixels.
Show Controls Determines if the standard Google Map controls appear.

Advanced

Setting Description
Alignment Determines the horizontal alignment of the map. Options:
Default - Applies the alignment default setting that is specified in the stylesheet of the current theme.
Left - Aligns the map along the left border of the parent container, with allowance for any padding that is specified.
Center - Aligns the map in the center of the parent container, with allowance for any padding that is specified.
Right - Aligns the map along the right border of the parent container, with allowance for any padding that is specified.
Border Determines the border style that is applied to all sides of the banner container. Options:
Default - Applies the default border style from the stylesheet that is associated with the current theme.
None - Provides no visible indication of banner borders.
Dotted - The banner border appears as a dotted line.
Dashed - The container border appears as a dashed line.
Solid - The banner border appears as a solid line.
Double - The container border appears as a double line.
Groove - The banner border appears as a grooved line.
Ridge - The container border appears as a ridged line.
Inset - The banner border appears as an inset line.
Outset - The container border appears as an outset line.
Border Color Determines the color of the container border. Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value.
Border Width Determines the width in pixels of the container border.
Border Radius Specifies the size of the radius that is used to round each corner of the container border.
CSS Classes Specifies the names of CSS classes from the current stylesheet that apply to the banner. Separate multiple class names with a space.
Margins and Padding Determines the size, in pixels, of the outer margins of the map container. Enter the corresponding values in the diagram. Options:
Margins - The amount of blank space, in pixels, that is to be applied to the outside edge of all sides of the banner. Options: Top / Right / Bottom / Left
Padding - N/A

Note: Padding is not available for the Map content type.