Partstore.Online Help and Training Center

Resources to help you become an expert at using Partstore.Online

Map widget

The Map widget adds a Google Map with a marker to web pages in a visually pleasing format.
The Map widget


The Map widget adds a Google Map with a marker to web pages in a visually pleasing format without requiring that you generate the underlying HTML code.


Before you start you must have an account on the Google Maps platform at https://console.cloud.google.com/


The Google Maps account will be connected to the Widget with an API key. The key is a unique identifier that can be generated on the Google Maps platform. To find more information about the Google Maps platform and how to get started please refer to Google Maps' tutorial. A link to Google Maps' Tutorial is included in the description of this video.


To add a Map widget to a page click on the Map Widget icon.


Select the layout you want to use from the Map Widget "preview" drop down.


These options include displaying the Map left of the text.


Displaying the Map right of the text.


Displaying the Map centered with the text.


Once the selection is made, The map widget is added to the page and displayed on the left side of the page editor in the list of "Your Widgets."


Click the Edit button to modify your content.


Title field is the name you want to give the widget.


The toggle controls if the title is displayed on the web page.


Wrapper class -is a techie term for how the content will be displayed.


Select if you want the content size to be limited by its parent container, or stretched to the full-screen width.


Background Color allows the selection of the background color behind the Google Map block.


The Content dialog contains the text or HTML that should be displayed with the map.


In the API Key field, insert the API key generated in your Google Maps account.


Add the location parameters like latitude and longitude or insert the address in the address field. This instructs the map widget on what should be displayed to the user.


Select the maps' position relative to the text content from the Position Dropdown, choosing Left. Right. or Center.


Optionally select to show or hide a clickable button that will be displayed with the map.


Next, optionally add the button caption.


And then add a button link.


The link can be a relative or absolute URL.


Preview the page before saving by clicking on the “Live Preview” button.


Here is a sample preview of the page with the map widget.


Always remember to Click the Save button.