Styling van de locator aanpassen

Op het tabblad Styling pas je de kleuren en het uiterlijk van de locator aan, inclusief het marker-icoon op de kaart en de stijl van Google Maps zelf.

Wat je nodig hebt

  • Een Admin- of Eigenaar-account
  • De hexcodes (#000000-formaat) van je huisstijlkleuren

Stap voor stap

  1. Klik in de zijbalk op Locator.
  2. Open het tabblad Styling.
  3. Pas de kleuren en marker-instellingen aan.
  4. Klik op Opslaan .

Kleuren

  • Achtergrond kleur zoek knop - primaire knopkleur (bijvoorbeeld de zoekknop).
  • Text kleur zoek knop - tekstkleur op die knop.
  • Kleur kaart / lijst weergave knoppen - secundaire knopkleur.
  • Text kleur kaart / lijst weergave knoppen - tekstkleur op die knoppen.
  • Achtergrond kleur locator - algemene achtergrondkleur van de locator.
  • Achtergrond kleur filter - achtergrond van de filterbalk.
  • Header kleur filter - kleur van de groepskoppen in de filterbalk.
  • Label kleur filter - kleur van de filter-labels.
  • Text kleur filter - tekstkleur binnen de filterbalk.
Donkere variant wordt automatisch berekend

Voor de zoek-knop en de kaart/lijst-knoppen wordt automatisch een donkere variant gegenereerd voor hover-effecten. Je hoeft die niet apart in te stellen.

Marker

  • Marker gebruikt op map - upload een svg-bestand (max 500 kb) als pin op de kaart. Geen upload? Dan wordt het standaard Google-icoon gebruikt in jouw secundaire kleur.
  • Marker hoogte en Marker breedte - pixelafmetingen waarop het svg-icoon wordt weergegeven. Laat ze leeg om de oorspronkelijke afmetingen van het svg-bestand te gebruiken.

Wil je per dealer een afwijkende marker? Upload eerst extra markers via het tabblad Markers, en kies vervolgens op het bewerkscherm van de dealer onder Eigen marker welke marker hij krijgt.

Styling Google Maps

Het veld Styling Google Maps accepteert een Google Maps style-array (JSON) waarmee je het uiterlijk van de kaart aanpast - bijvoorbeeld de kleur van wegen, water of POI's. Genereer zo'n style-array via snazzymaps.com of de Google Maps Styling Wizard, en plak de output in dit veld.

Test eerst in een testomgeving

Een onjuiste JSON in dit veld breekt de kaartweergave. Test je styling-array altijd eerst in een tool als Snazzy Maps voordat je hem hier plakt.

Veelgestelde vragen

Een vierkant svg met een transparante achtergrond, optimaal rond de 40 × 40 pixels. Vermijd hele complexe svg's met veel paden - die laden langzamer.

Cleer de browsercache van je site of open hem in een incognito-venster. Browsers cachen styling soms agressief.