ग्रेस्केल

Question

में Google मानचित्र क्या कोई अन्य कार्यक्षमता खोए बिना ग्रेस्केल में Google मानचित्र (जावास्क्रिप्ट एपीआई के माध्यम से एम्बेडेड) प्रदर्शित करने का कोई तरीका है?

Answer 1

हां, एपीआई के वी 3 में उन्होंने StyledMaps पेश किया है।

आपके पास अपनी पसंद की शैलियों के लिए कोड जेनरेट करने के लिए provided a tool भी है। "संतृप्ति" को नीचे से नीचे स्लाइड करें और आपको ग्रेस्केल चल रहा है!

निम्न उदाहरण ब्रुकलिन की एक ग्रेस्केल नक्शा प्रदर्शित करता है:

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

Google पर अच्छे लोगों को लिखने और उन्हें अपनी सभी छवि टाइल्स और वैकल्पिक API पैरामीटर के ग्रे-स्केल संस्करण बनाने के लिए कहने के अलावा, नहीं।

Answer 3

आईई में filter: gray निर्देश है।

यह ग्रेस्केल में कोई HTML तत्व प्रस्तुत करता है। JSFiddle here।

आप मानचित्र के मूल DIV पर इसे लागू करने में सक्षम हो सकते हैं। यह एक ग्रेस्केल represtenation में शामिल नक्शा बारी है। मैं यह नहीं कह सकता कि यह साइड इफेक्ट्स के बिना काम करेगा - आपको कोशिश करनी होगी। लेकिन यह बहुत संभव है।

केवल आईई, हालांकि, लेकिन संस्करण 4.

Grayscale Filter docs at MSDN

उसके अलावा के बाद से समर्थन किया, मुझे लगता है कि नक्शे के लिए एक फ्लैश एपीआई नहीं है, वहाँ नहीं है? वहां हासिल करना आसान हो सकता है।

Answer 4

बस CSS3 grayscale() फिल्टर प्रभाव का उपयोग Google मानचित्र के लिए iframe तत्व! यह काम करता है क्योंकि जेएस कोड छवियों को प्रिंट करता है।

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

कोशिश भी बहुत पहले div.gm-style तहत div तत्व (या किसी अन्य आवरण) को यह लगाने से केवल पृष्ठभूमि छवियों लक्षित करने के लिए। मुझे नहीं पता कि Google अक्सर डोम संरचना को बदलता है लेकिन फिलहाल बोल रहा है (25 नवंबर 2014) यह ठीक काम करता है।

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

Answer 5

हां, Google नक्शे के लिए एक तृतीय पक्ष API है जो ग्रे-स्केल (स्नैज़िमैप्स) प्रदान करता है।

यह बहुत आसान है। आप Google मानचित्र के लिए अलग-अलग रंग योजना प्राप्त करने के लिए इस वेबसाइट का उपयोग कर सकते हैं।

http://snazzymaps.com

Answer 6

इस चेक आउट:

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

एक आकर्षण :) की तरह काम करता है

Answer 7

में थोड़ा छोटा रास्ता (@Roatin Marth के best answer की तुलना में) अपने Google नक्शा बनाने के लिए नहीं है Google Maps JavaScript API v3 के साथ ग्रेस्केल सीधे Google Maps API Styled Map Wizard के साथ जेनरेट की गई शैलियों सहित 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); 

जब आपकी शैलियों अनुकूलन परिष्करण Google Maps API Styled Map Wizard का उपयोग कर मानचित्र शैली पैनल के अंदर पर "शो JSON" बटन पर क्लिक करके सरणी mapOptions चर में styles संपत्ति के तहत सेट मिलता है।