Lorsqu’on intégre une carte Google dans un site web, il existe une astuce qui permet d’obtenir un effet « Noir et blanc » sans recourir au code Javascript de l’API, qui peut être complexe à manipuler.

Cette astuce repose sur la propriété CSS filter().

Cette propriété est désormais assez bien supportée par les navigateurs. (Seul Internet Explorer et Opera Mini semblent ne pas encore supporter cette propriété).

Supposons que le sélecteur de la carte utilisé a pour identifiant « carte », le code CSS à insérer sera le suivant :


#carte img:not([src$=".png"]) {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

Dans le code ci-dessus, le sélecteur :not([src$=".png"]) permet de ne pas mettre en N/B les marqueurs sur la carte qui possèdent l’extension « .png ».

Vous pouvez consulter un exemple de ce code en action :