Карты Google в градациях серого

Question

Есть ли способ отобразить карту Google (встроенную через Javascript API) в оттенках серого, не теряя других функций?

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

Answer 2

Существует несколько более короткий способ (по сравнению с лучшим ответом *1001* @Roatin Marth) сделать вашу карту Google серой с помощью JavaScript API Карт Google v3 , напрямую добавив стили, созданные вами с помощью Мастер карт Google API Styled Map в 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» внутри картыПанель стилей при завершении настройки стилей с помощью Мастер стилей карт API Карт Google .

Answer 3

Просто используйте CSS3 grayscale () Эффект фильтра для элемента 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
}

Answer 4

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

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

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

Answer 5

Используйте свойство фильтра CSS, чтобы преобразовать карту Google в черно-белое.100% полностью черно-белое

selector {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

Answer 6

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

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

http://snazzymaps.com

Answer 7

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

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

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

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

Документы фильтра оттенков серого на MSDN

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

Answer 8

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