rendere iframe google map in bianco e nero

Question

Ho usato una mappa di google in iframe.

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.in/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Madurai,+Tamil+Nadu&amp;aq=0&amp;oq=madursi&amp;sll=10.782836,78.288503&amp;sspn=5.674603,10.755615&amp;ie=UTF8&amp;hq=&amp;hnear=Madurai,+Tamil+Nadu&amp;t=m&amp;z=12&amp;ll=9.925201,78.119775&amp;output=embed"></iframe><br /><small><a href="https://maps.google.co.in/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Madurai,+Tamil+Nadu&amp;aq=0&amp;oq=madursi&amp;sll=10.782836,78.288503&amp;sspn=5.674603,10.755615&amp;ie=UTF8&amp;hq=&amp;hnear=Madurai,+Tamil+Nadu&amp;t=m&amp;z=12&amp;ll=9.925201,78.119775" style="color:#0000FF;text-align:left">View Larger Map</a></small> 

Come visualizzare una mappa di google in bianco e nero?

Answer 1

Con rights l'unico modo per fare un bianco e nero mappa di Google è quello di utilizzare la loro Styled Maps api

Il tuo post è stato taggato con API in modo da suppongo un'opzione non-iframe è ok per voi. Se il metodo di inclusione non è stato risolto, questo potrebbe darti un'idea di alternativa. È anche possibile utilizzare le mappe in stile per generare un Google Static Map che sarebbe anche compatibile con iFrame.

Puoi anche dare un'occhiata a Stamen maps che si basano su Open Street Maps, ma possono essere utilizzate come livelli di sovrapposizione su Google Maps. La forma di consegna non è probabilmente possibile solo attraverso un URL iframe creato.

Answer 2

Aggiungi un <div> arround il e stle come:

webkit-filter: grayscale(100%); 

Answer 3

Funziona, ma si dovrebbe anche aggiungere la formattazione che i vari browser richiedono per scala di grigi.

<div style="-webkit-filter: grayscale(100%); filter: grayscale(100%);">

Ecco il violino: http://jsfiddle.net/j9p9w62f/

Answer 4

tenta di utilizzare

<iframe class="map" width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps(...)"></iframe> 

.map { 
     -webkit-filter: grayscale(100%); 
     -moz-filter: grayscale(100%); 
     -ms-filter: grayscale(100%); 
     -o-filter: grayscale(100%); 
     filter: grayscale(100%); 
} 

Questo aiuterà