Media - Map
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
-
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.
Map toolbox
The map toolbox appears when you hover over the map container.
img-md |
---|
w-25 |
img-md |
---|
w-25 |
img-md |
---|
w-25 |
img-md |
---|
w-25 |
img-md |
---|
w-25 |
img-md |
---|
w-25 |
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.
-
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.
Step 2: Configure Google Maps in Commerce
-
In the Admin sidebar, go to Stores > Settings > Configuration.
-
In the left panel under General, choose Content Management.
-
Expand Advanced Content Tools.
img-md w-600 modal-image 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.
Add a map to the stage
-
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.
img-md w-600 modal-image If Google Maps Platform is configured for your store, a map appears for your store location.
img-md w-600 modal-image If Google Maps Platform is not yet configured for your store, a placeholder map appears instead.
img-md w-600 modal-image
Add a custom map location
-
Hover over the map container to display the toolbox and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-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:
img-md w-600 modal-image Method 1: Copy from URL
-
In the upper-left corner, enter the address in the Search box and click the Search (+-------------------------+ | img-md | +=========================+ | w-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:
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. -
When complete, click Save.
The new location appears in the map and in the map location grid on the Edit Map page.
img-md w-600 modal-image
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
-
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.
Change the map settings
-
Hover over the map container to display the tool box and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | | +--------------------------+) icon.
-
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. -
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:img-md w-600 modal-image 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.
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.
-
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:
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.
img-md w-600 modal-image -
-
When complete, click Save Config.