web-dev-qa-db-fra.com

Google Maps en niveaux de gris

Est-il possible d'afficher une carte Google Map (intégrée via l'API Javascript) en niveaux de gris sans perdre aucune autre fonctionnalité?

javascriptgoogle-maps
42
DLiKS

Oui, dans la V3 de l’API ils ont introduit StyledMaps .

Ils ont même fourni un outil pour vous de générer le code pour les styles que vous aimez. Faites glisser la "Saturation" tout en bas et vous obtenez 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');
108
Roatin Marth

Il existe un moyen un peu plus court (comparé à @Roatin Marth meilleure réponse ) de rendre votre carte Google en niveaux de gris avec API Google Maps JavaScript v3 , en incluant directement les styles que vous avez générés avec Google Maps API Styled Map Wizard dans l'objet google.maps.MapOptions:

var container = document.getElementById('map_canvas');
var mapOptions = {
  zoom: 11,
  center: new google.maps.LatLng(40.6743890, -73.9455),
  styles: [{
    stylers: [{
      saturation: -100
    }]
  }]
};

var map = new google.maps.Map(container, mapOptions);

Vous obtenez le tableau défini sous la propriété styles dans la variable mapOptions en cliquant sur le bouton "Afficher JSON" dans le panneau Style de map lorsque vous avez terminé la personnalisation des styles à l'aide de Google Maps Styled Map Wizard .

JSON output demonstrating styles array to set into mapOptions

32
Nik Sumeiko

Utilisez simplement CSS3 niveaux de gris () 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 appliquant cela au tout premier élément div sous le div.gm-style (ou à tout autre wrapper). Je ne sais pas si Google modifie souvent la structure du domaine mais pour l'instant (25 nov 2014), cela fonctionne bien.

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

Regarde ça:

http://snazzymaps.com/style/15/subtle-grayscale

Fonctionne comme un charme :)

1
HasanAboShally

IE a la directive filter: gray.

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

Vous pouvez pouvez appliquer cela à la division parent de la carte. Il peut transformer la carte qu'elle contient en une represtenation en niveaux de gris. Je ne peux pas dire si cela fonctionnera sans effets secondaires - vous devrez essayer. Mais c'est bien possible.

Internet uniquement, cependant, mais pris en charge depuis la version 4. 

Filtre de niveaux de gris docs sur MSDN

Autre que cela, je pense qu'il y a une API Flash pour les cartes, n'est-ce pas? Il serait peut-être plus facile d'y parvenir.

0
Pekka 웃

Utilisez la propriété de filtre CSS pour convertir la carte Google en noir et blanc. 100% est complètement noir et blanc

selector {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
0
swathi_sri