Google Maps en niveaux de gris
Existe-t-il un moyen d'afficher une carte Google (intégrée via L'API Javascript) en niveaux de gris sans perdre aucune autre fonctionnalité?
8 réponses
Oui, dans la V3 de l'api, ils ont introduit StyledMaps.
Ils ont même fourni un outil pour générer le code pour les styles que vous aimez. Faites glisser la "Saturation" tout le chemin vers le bas et vous avez des niveaux de gris en cours!
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');
Il y a un moyen un peu plus court (comparé à la meilleure réponse de @Roatin Marth ) pour rendre votre google map en niveaux de gris avec Google Maps JavaScript API V3 en incluant directement les styles que vous avez générés avec Google Maps API Styled Map Wizard dans google.maps.MapOptions object:
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 de style de carte lorsque vous terminez la personnalisation de vos styles à l'aide de Google Maps API Styled Map Assistant .
Il suffit d'utiliser CSS3 grayscale () effet de filtre pour L'élément iframe 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 ceci au tout premier élément div sous le div.gm-style (ou tout autre wrapper). 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
}
IE a la directive filter: gray.
Il rend tout élément HTML en niveaux de gris. JSFiddle ici .
Vous pouvez être en mesure d'appliquer ceci à la DIV parent de la carte. IL peut transformer la carte qu'il contient en une réimpression en niveaux de gris. Je ne peux pas dire si cela fonctionnera sans effets secondaires-vous devrez essayer. Mais c'est bien possible.
IE seulement, cependant, mais pris en charge depuis la Version 4.
Docs de filtre en niveaux de gris à MSDN
Autres que cela, je pense qu'il y a une API Flash pour les cartes, n'est-ce pas? Il pourrait être plus facile à réaliser là.
Utilisez la propriété CSS filter 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%);
}
Oui, il existe une API tierce pour Google maps qui fournit des niveaux de gris (snazzymaps).
C'est très simple. Vous pouvez utiliser ce site pour obtenir les différentes couleurs pour google maps.
En plus d'écrire les bonnes personnes chez Google et de leur demander de créer des versions à échelle de gris de toutes leurs tuiles d'image et un paramètre API optionnel, non.