Карты Google в оттенках серого

Ответ 1

Да, в V3 из api они ввели StyledMaps.

Они даже предоставили инструмент для создания кода для стилей, которые вам нравятся. Сдвиньте "Насыщенность" полностью вниз, и вы получите оттенки серого!

В следующем примере отображается черно-белая карта Бруклина:

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');

Ответ 2

Там немного более короткий путь (по сравнению с @Roatin Marth лучший ответ), чтобы сделать вашу карту в оттенках серого Google Google Maps JavaScript API v3, непосредственно используя стили, сгенерированные с помощью API-карты с API-интерфейсом API Карт Google в объект 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);

Вы получаете массив, расположенный под styles в переменной mapOptions, нажав кнопку "Показать JSON" внутри панели "Стиль карты", когда вы закончите настройку стилей, используя Мастер стилей карты Google Maps.

Ответ 3

Просто используйте эффект CSS3 оттенков серого() для элемента iframe карт Google! Он работает, потому что код js печатает изображения.

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 под div.gm-style (или любой другой оболочкой). Я не знаю, часто ли Google меняет структуру dom, но в данный момент вы говорите (25 ноября 2014 г.), это прекрасно работает.

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

Ответ 4

Проверьте это:

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

Работает как шарм:)

Ответ 5

IE имеет директиву filter: gray.

Он отображает любой элемент HTML в оттенках серого. JSFiddle здесь.

Возможно, вы сможете применить это к родительскому объекту DIV. Он может превратить карту, содержащую ее, в редакцию в градациях серого. Я не могу сказать, будет ли это работать без побочных эффектов - вам придется попробовать. Но это вполне возможно.

Только IE, но поддерживается с версии 4.

Оттенки градаций серого в MSDN

Кроме этого, я думаю, что есть Flash API для Карт, не так ли? Там может быть легче достичь.

Ответ 6

Да, есть сторонний API для карт Google, который обеспечивает серое (snazzymaps).

Это очень просто. Вы можете использовать этот веб-сайт, чтобы получить разную цветовую схему для карт Google.

http://snazzymaps.com

Ответ 7

Помимо написания хороших людей в Google и попросить их создать серо-масштабные версии всех своих графических плит и необязательный параметр API, нет.