How to change the style of the map in Locator & Pages?

Use Google MapStyle to adjust the style of your Locator's map.

Last updated on March 14th, 2022

This article explains how to change the style of the Locator's map using the Google MapStyle tool. 

To provide styles for the static map in the location details page, there are two ways: 

Adding a script tag: 

Create a script tag before the store locator script tag and assign the styles string to `window.ubStaticMapStyles`

<script type="text/javascript">
window.ubStaticMapStyles = "https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&center=47.65,-122.35&zoom=12&format=png&maptype=roadmap&style=feature:road.arterial%7Celement:labels%7Cvisibility:off&style=feature:road.highway%7Celement:labels%7Cvisibility:off&style=feature:road.local%7Cvisibility:off&size=480x360";
</script>
<scriptsrc="http://dev.uberall.com/assets/storeFinderWidget-v2.js" type="text/javascript"></script>

 

Use a data-option: 

Use `data-staticmapstyles` attribute of the store locator widget.

data-staticmapstyles = "https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&center=47.65,-122.35&zoom=12&format=png&maptype=roadmap&style=feature:road.arterial%7Celement:labels%7Cvisibility:off&style=feature:road.highway%7Celement:labels%7Cvisibility:off&style=feature:road.local%7Cvisibility:off&size=480x360"



In both ways, the value should be a string (enclosed with quotation marks)

The styles string can be obtained from https://mapstyle.withgoogle.com/

Please note, that for either option you will need a valid Google Maps API key.

Example:


Was this article helpful?

Save as PDF