làm iframe google map đen trắng

Question

Tôi đã sử dụng bản đồ google trong khung nội tuyến.

<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> 

Làm cách nào để hiển thị bản đồ google có màu đen và trắng?

Answer 1

By rights cách duy nhất để làm cho Google Map đen và trắng là sử dụng họ Styled Maps api

Bài đăng của bạn đã được gắn thẻ với API vì vậy tôi giả định là một lựa chọn không iframe là ok cho bạn. Nếu phương pháp đưa vào không được khắc phục, điều này có thể sẽ cho bạn ý tưởng thay thế. Bạn cũng có thể sử dụng bản đồ được tạo kiểu để tạo Google Static Map mà sau đó cũng sẽ thân thiện với iFrame.

Bạn cũng có thể xem Stamen maps Dựa trên Bản đồ phố mở, nhưng có thể được sử dụng làm lớp phủ cho Google Maps. Hình thức phân phối không có khả năng chỉ thông qua url iframe được tạo thủ công.

Answer 2

Thêm một <div> arround và stle nó như:

webkit-filter: grayscale(100%); 

Answer 3

Nó không làm việc, nhưng bạn cũng nên thêm các định dạng mà các trình duyệt khác nhau đòi hỏi cho màu xám.

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

Đây là fiddle: http://jsfiddle.net/j9p9w62f/

Answer 4

Cố gắng sử dụng

<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%); 
} 

Điều này sẽ giúp