Google Maps en niveaux de gris

Question

Existe-t-il un moyen d'afficher une carte Google (intégrée via l'API Javascript) en niveaux de gris sans perdre d'autres fonctionnalités ?

Answer 1

Oui, dans la V3 de l'api, ils ont introduit StyledMaps .

Ils ont même a fourni un outil pour que vous puissiez générer le code des styles que vous aimez. Faites glisser le bouton "Saturation" vers le bas et vous obtiendrez des niveaux de gris !

L'exemple suivant affiche une carte en niveaux de gris de Brooklyn :

var map;
var brooklyn = new google.maps.LatLng(40.6743890, -73.9455);

var stylez = [
    {
      featureType: "all",
      elementType: "all",
      stylers: [
        { saturation: -100 } // <-- THIS
      ]
    }
];

var mapOptions = {
    zoom: 11,
    center: brooklyn,
    mapTypeControlOptions: {
         mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'tehgrayz']
    }
};

map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var mapType = new google.maps.StyledMapType(stylez, { name:"Grayscale" });    
map.mapTypes.set('tehgrayz', mapType);
map.setMapTypeId('tehgrayz');

Answer 2

Il suffit d'utiliser CSS3 grayscale() Effet de filtre pour l'élément iframe de Google maps ! Cela fonctionne parce que le code js imprime des images.

iframe { 
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
}

Essayez également de cibler uniquement les images d'arrière-plan en l'appliquant au tout premier élément div sous l'élément div.gm-style (ou toute autre enveloppe). Je ne sais pas si Google change souvent la structure dom mais pour le moment (25 Nov 2014) cela fonctionne bien.

iframe .gm-style > div:first-child {
  // Same code here
}

Answer 3

IE a le filter: gray directive.

Il rend n'importe quel élément HTML en niveaux de gris. JSFiddle aquí .

Vous peut de l'appliquer à la DIV parente de la carte. Il peut transformer la carte qu'il contient en une représentation en niveaux de gris. Je ne peux pas dire si cela fonctionnera sans effets secondaires - il faut essayer. Mais c'est tout à fait possible.

IE seulement, mais supporté depuis la version 4.

Documentation sur le filtre en niveaux de gris sur MSDN

À part cela, je pense qu'il existe une API Flash pour les cartes, n'est-ce pas ? Cela pourrait être plus facile à réaliser.

Answer 4

Oui, il existe une API tierce pour les cartes Google qui fournit une échelle de gris (snazzymaps).

C'est très simple. Vous pouvez utiliser ce site pour obtenir les différentes couleurs de Google Maps.

http://snazzymaps.com

Answer 5

À part écrire aux bonnes gens de Google pour leur demander de créer des versions en échelle de gris de toutes leurs tuiles d'images et un paramètre API optionnel, non.