1. Home
  2. Docs
  3. Getting Started
  4. Plugin Settings
  5. Display Settings

Display Settings

Background Color (HEX)

This option allows you to set the background color of the map container. The map’s background color is usually visible for the first few seconds of the map loading or when a customer is selecting their location. Select a background color that blends in nicely with your website.

Where Should the Map Appear on the Checkout Page

Location Picker at Checkout for WooCommerce (LPAC) lets you choose between 4 different locations on the checkout page to inject the map. Choose the option which best suits your website.

Checkout Page Map Height (in px)

Set the height for the map on the checkout page. The number you enter in this field will be used as a pixels value. I.e 400 = 400px high.

Checkout Page Map Width (in %)

Set the width for the map on the checkout page. The number you enter in this field will be used as a percentage. I.e 80 = 80% of the usable checkout page width. The number you enter here would depend on how your theme is handling the WooCommerce checkout fields, but 100 is usually the best value.

Order Received Page Map Height (in px)

Set the height for the map that appears on the Order Received page. The number you enter in this field will be used as a pixels value.

Order Received Page Map Width (in px)

Set the width for the map on the Order Received page. The number you enter in this field will be used as a percentage.

View Order Page Map Height (in px)

Set the height for the map that appears on the View Order page. The number you enter in this field will be used as a pixels value.

View Order Page Map Width (in px)

Set the width for the map on the View Order page. The number you enter in this field will be used as a percentage.

Map ID

Enter the Map ID retrieved from Google. You can have different Map IDs for different maps on the website.

See the video below for steps on grabbing the JSON code needed for import into Google Cloud Console Maps Platform and retrieving the Map ID.

You can create custom maps or use those already created by other users on Snazzy Maps.

Note

You can create custom Map Styles directly on the Google Cloud Console Maps Platform. Snazzy Maps allows you to checkout other maps users have created and make use of those styles if you prefer them. You can always edit a map style if there’s something about it you don’t like.


Marker Icon

Link to Icon

Enter the direct link to the icon to be used as the marker. This link should be publicly accessible and ideally should be a link to a marker image uploaded to your website.

Marker Anchor Points

Enter the anchor points to be used for the marker icon. This setting affects the “X” point which shows on the map when the marker is dragged. A good rule of thumb to use is the X value is usually half of the image width, the Y value is usually the image height + 3. So if you have a marker image which is 48px width by 48px height then an anchor point that might work for this image would be 24,52

Was this article helpful to you? Yes No