Magento Commerce, 2.3.x

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
Styling the Map

Use the Google Maps Platform Styling Wizard to apply a one of six predefined themes, or create a custom themeA package that contains graphics and appearance information, and customizes the look and feel of the store.. You also can generate a JSON file with the map style properties, or a link to the styled map.

  • Map Toolbox

    TOOL

    Icon

    Description

    Move

    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

    Opens the Edit Map page, where you can change the properties of the map and container.

    Hide

    Hides the current map and container.

    Show

    Shows the hidden map and container.

    Duplicate

    Makes a duplicate copy of the map and container.

    Remove

    Deletes the map and container 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 settings

    Map Height

    Specifies the height of the map in pixels.

    Show Controls

    Determines if the standard Google Map controls appear.

    Advanced

    Alignment

    Determines the horizontal alignment of the map. Options:

    Default

    Applies the alignment default setting that is specified in the style sheet 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 four sides of the map container. Options:

    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.

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

    CSS Classes

    Specifies the names of CSS classes from the current style sheet which apply to the container. 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.

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

    Margins

    The amount of blank space, in pixels, that is applied to the outside edge of all sides of the container. Options: Top, Right, Bottom, Left.

    Padding

    N/A