Comment changer le style de la carte dans Locator & Pages?

Utilisez Google MapStyle pour ajuster le style de la carte de votre localisateur.

Last updated on May 13th, 2022

Cet article explique comment modifier le style de la carte du localisateur à l'aide de l'outil Google MapStyle.

Il existe deux façons de fournir des styles pour la carte statique dans la page des détails de l'emplacement:

Ajout d'une balise de script:

Créez une balise de script avant la balise de script de localisateur de magasins et attribuez la valeur texte - string - des styles à `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>

 

Utilisez un data-option:

Utilisez l'attribut `data-staticmapstyles` du widget de localisation de magasins.

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



Dans les deux cas, la valeur doit être une valeur texte - string (entre guillemets)

La valeur des styles peut être obtenue à partir de https://mapstyle.withgoogle.com/

Veuillez noter que pour l'une ou l'autre option, vous aurez besoin d'une clé API Google Maps valide.

Exemple:


Was this article helpful?

Save as PDF