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, choose Stores. Then under Settings, choose Configuration.

  2. In the panel on the left under General, choose Content Management. 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.

    • Tap Test Key.

    • Do one of the following:

      • After your key is verified, tap 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, tap 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 in the toolbox, choose Settings ( ).

  2. In the upper-right corner of the Edit Map page, tap 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. Then, 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, tap 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, chose 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, choose Stores. Then under Settings, choose Configuration.

  2. In the panel on the left under General, choose Content Management.  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. Tap 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, tap Finish.

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

      Export Style

    JSON

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

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

    3. In the upper-right corner, tap Save Config.

    URL

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

    2. Paste the generated URL into a text editor.

    3. 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, choose Stores. Then under Settings, choose Configuration.

  2. In the panel on the left under General, choose Content Management. Scroll down to the Advanced Content Tools section, and 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, tap Save Config.

Map Toolbox

TOOLIconDescription
MoveMoves the map to another position on the stage.
(label)MAPIdentifies the current content container as a map. Hover over the map container to see the toolbox.
SettingsOpens the Edit Map page, where you can change the properties of the map and container.
HideHides the current map and container.
ShowShows the hidden map and container.
DuplicateMakes a duplicate copy of the map and container.
RemoveDeletes the map and container from the stage.

Map Settings

SettingDescription
Map LocationsA grid that lists the current map locations.
Add LocationAdds a custom location to the map with the following information:
PositionA map with a pin that marks the location.
Location NameThe name that you want to appear on the map.
CoordinatesGPS coordinates for the location latitude and longitude.
Phone Number

 

The telephone number of the location.
Street AddressThe street address of the location.
CityThe city of the location.
Region/StateThe region or state of the location.
Zip/Postal CodeThe ZIP or postal code of the location.
CountryThe country of the location.
CommentAny comments that you want to include.
map settings
Map HeightSpecifies the height of the map in pixels.
Show ControlsDetermines if the standard Google Map controls appear.
Advanced
AlignmentDetermines the horizontal alignment of the map. Options:
DefaultApplies the alignment default setting that is specified in the style sheet of the current theme.
LeftAligns the map along the left border of the parent container, with allowance for any padding that is specified.
CenterAligns the map in the center of the parent container, with allowance for any padding that is specified.
RightAligns the map along the right border of the parent container, with allowance for any padding that is specified.
BorderDetermines the border style that is applied to all four sides of the map container. Options:
DefaultApplies the default border style that is specified by the associated style sheet.
NoneDoes not provide any visible indication of the container borders.
DottedThe container border appears as a dotted line.
DashedThe container border appears as a dashed line.
SolidThe container border appears as a solid line.
DoubleThe container border appears as a double line.
GrooveThe container border appears as a grooved line.
RidgeThe container border appears as a ridged line.
InsetThe container border appears as an inset line.
OutsetThe container border appears as an outset line.
Border ColorDetermines 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 WidthDetermines the width in pixels of the container border.
Border RadiusSpecifies the size of the radius that is used to round each corner of the border.
CSS ClassesSpecifies the names of CSS classes from the current style sheet which apply to the container. Separate multiple class names with a space.
Margins and PaddingDetermines the size, in pixels, of the outer margins of the map container. Enter the corresponding values in the diagram. Options:
Padding is not available for the Map content type.
MarginsThe amount of blank space, in pixels, that is applied to the outside edge of all sides of the container. Options: Top, Right, Bottom, Left.
PaddingN/A