Google Maps in scala di grigi

Question

Esiste un modo per visualizzare una mappa di Google (incorporata tramite l'API di Javascript) in scala di grigi senza perdere altre funzionalità?

Answer 1

Sì, nella V3 dell'api hanno introdotto StyledMaps.

Hanno persino provided a tool per generare il codice per gli stili che ti piacciono. Fai scorrere la "Saturazione" fino in fondo e hai la scala di grigi in corso!

L'esempio seguente visualizza una mappa in scala di grigi di 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

Oltre a scrivere le brave persone su Google e chiedendo loro di creare versioni in scala di grigi di tutti i riquadri dell'immagine e un parametro API facoltativo, no.

Answer 3

IE ha la direttiva filter: gray.

Rappresenta qualsiasi elemento HTML in scala di grigi. JSFiddle here.

È in grado di applicare questo al DIV principale della mappa. può girare la mappa che contiene in una represtenation di gradazione di grigio. Non posso dire se questo funzionerà senza effetti collaterali - dovresti provare. Ma è ben possibile.

IE soltanto, però, ma supportato dalla versione 4.

Grayscale Filter docs at MSDN

Oltre a questo, penso che ci sia un API di Flash per Maps, non c'è? Potrebbe essere più facile da raggiungere lì.

Answer 4

Basta usare CSS3 grayscale() effetto filtro per le mappe di Google elemento iframe! Funziona perché il codice js stampa le immagini.

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 */ 
} 

Prova anche a bersaglio solo le immagini di sfondo applicando questo per la prima div elemento sotto il div.gm-style (o qualsiasi altro involucro). Non so se Google modifichi spesso la struttura dom ma al momento parlando (25 nov 2014) questo funziona correttamente.

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

Answer 5

Sì, c'è un'API di terze parti per le mappe di Google che fornisce una scala di grigi (snazzymaps).

È molto semplice. È possibile utilizzare questo sito Web per ottenere la combinazione di colori diversa per google maps.

http://snazzymaps.com

Answer 6

Dai un'occhiata a questo:

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

funziona come un fascino :)

Answer 7

C'è un modo più breve po '(confronto ad @Roatin Marth di best answer) per rendere la vostra mappa di Google scala di grigi con Google Maps JavaScript API v3 includendo direttamente gli stili generati con Google Maps API Styled Map Wizard nell'oggetto 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); 

Si ottiene l'array impostato in styles proprietà in mapOptions variabile facendo clic sul pulsante su "Mostra JSON" dentro pannello Mappa di stile durante la finitura la personalizzazione di stili utilizzando Google Maps API Styled Map Wizard.