Визуализация карт Google

@Dmitrin · Регистрация: 04.12.2012

Author24 — интернет-сервис помощи студентам

Здравствуйте. Имеется макет карты (рисунок 1). Подскажите, как можно именно вот эти элементы (на рисунке 2 показаны стрелками) на карте нарисовать, чтобы при сдвиге карты они всегда на месте стояли, то есть было абсолютное позиционирование? Их все отдельно нужно сделать будет? Если одним изображением, то карта и двигаться то не будет?

И второй вопрос - как можно так затемнить карту Google?

@evikza · 26.07.2016, 23:08

Dmitrin, кастомно-стилизовать карты от google, вам поможет сервис __//snazzymaps.com. Выбираем тему, подключаем ее к карте. Все очень просто.

Javascript

var styleMap = [{
    "featureType": "administrative",
    "elementType": "labels.text.fill",
    "stylers": [{
      "color": "#444444"
    }, {
      "visibility": "off"
    }]
  }, {
    "featureType": "administrative",
    "elementType": "labels.text.stroke",
    "stylers": [{
      "color": "#8a989d"
    }, {
      "lightness": "-33"
    }]
  }, {
    "featureType": "landscape",
    "elementType": "all",
    "stylers": [{
      "color": "#b1cbd2"
    }, {
      "lightness": "10"
    }]
  }, {
    "featureType": "landscape",
    "elementType": "labels.text.fill",
    "stylers": [{
      "color": "#8a989d"
    }, {
      "visibility": "off"
    }]
  }, {
    "featureType": "landscape.natural",
    "elementType": "labels.text.stroke",
    "stylers": [{
      "visibility": "on"
    }, {
      "color": "#8a989d"
    }, {
      "lightness": "-33"
    }]
  }, {
    "featureType": "poi",
    "elementType": "all",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "poi.park",
    "elementType": "all",
    "stylers": [{
      "color": "#f2f2f2"
    }, {
      "visibility": "on"
    }]
  }, {
    "featureType": "poi.sports_complex",
    "elementType": "all",
    "stylers": [{
      "visibility": "on"
    }, {
      "color": "#8a989d"
    }]
  }, {
    "featureType": "poi.sports_complex",
    "elementType": "labels.text.fill",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "poi.sports_complex",
    "elementType": "labels.text.stroke",
    "stylers": [{
      "visibility": "on"
    }, {
      "color": "#ffffff"
    }]
  }, {
    "featureType": "road",
    "elementType": "all",
    "stylers": [{
      "saturation": -100
    }, {
      "lightness": 45
    }, {
      "visibility": "on"
    }]
  }, {
    "featureType": "road",
    "elementType": "labels.text.fill",
    "stylers": [{
      "visibility": "on"
    }, {
      "color": "#8a989d"
    }]
  }, {
    "featureType": "road",
    "elementType": "labels.text.stroke",
    "stylers": [{
      "color": "#ff0000"
    }, {
      "visibility": "off"
    }]
  }, {
    "featureType": "road",
    "elementType": "labels.icon",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "road.highway",
    "elementType": "all",
    "stylers": [{
      "visibility": "simplified"
    }, {
      "color": "#f2f2f2"
    }]
  }, {
    "featureType": "road.highway",
    "elementType": "geometry.fill",
    "stylers": [{
      "visibility": "on"
    }, {
      "color": "#ffffff"
    }]
  }, {
    "featureType": "road.highway",
    "elementType": "labels.text.stroke",
    "stylers": [{
      "color": "#8a989d"
    }, {
      "visibility": "on"
    }]
  }, {
    "featureType": "road.highway",
    "elementType": "labels.icon",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "road.highway.controlled_access",
    "elementType": "labels.text.stroke",
    "stylers": [{
      "color": "#8a989d"
    }]
  }, {
    "featureType": "road.arterial",
    "elementType": "all",
    "stylers": [{
      "visibility": "on"
    }, {
      "weight": "0.3"
    }]
  }, {
    "featureType": "road.arterial",
    "elementType": "labels.icon",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "road.local",
    "elementType": "labels.text",
    "stylers": [{
      "visibility": "off"
    }, {
      "weight": "1"
    }]
  }, {
    "featureType": "road.local",
    "elementType": "labels.text.fill",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "road.local",
    "elementType": "labels.text.stroke",
    "stylers": [{
      "visibility": "on"
    }, {
      "color": "#8a989d"
    }]
  }, {
    "featureType": "transit",
    "elementType": "geometry",
    "stylers": [{
      "visibility": "on"
    }]
  }, {
    "featureType": "transit",
    "elementType": "geometry.fill",
    "stylers": [{
      "color": "#f2f2f2"
    }, {
      "weight": "0.5"
    }]
  }, {
    "featureType": "transit",
    "elementType": "labels.text.fill",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "transit",
    "elementType": "labels.text.stroke",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "transit",
    "elementType": "labels.icon",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "transit.line",
    "elementType": "geometry.stroke",
    "stylers": [{
      "color": "#f3d7d7"
    }]
  }, {
    "featureType": "water",
    "elementType": "all",
    "stylers": [{
      "visibility": "on"
    }, {
      "color": "#6e9caa"
    }]
  }, {
    "featureType": "water",
    "elementType": "labels.text.stroke",
    "stylers": [{
      "color": "#ece3e3"
    }]
  }, {
    "featureType": "water",
    "elementType": "labels.icon",
    "stylers": [{
      "color": "#9a4343"
    }]
  }];

Подготовил пример для вас: http://codepen.io/evikza/pen/qNKkQg

@Dmitrin · 26.07.2016, 23:22 **[ТС]**

evikza, благодарю) Завтра изучу))

@evikza · 26.07.2016, 23:25

Не по теме:

Dmitrin, зря вы отметили тему решенной. Я ответил только на второй вопрос. С первым сижу разбираюсь :)

@Dmitrin · 27.07.2016, 10:04 **[ТС]**

Ну, я добавил контейнер отдельно на карте и просто абсолютным позиционированием добавлял эти элементы. Для компьютеров, ноутов и планшетов - вроде неплохо. А вот для экранов телефонов не знаю, как нормально позиционировать элементы эти...

@Dmitrin 23 / 23 / 11 Регистрация: 04.12.2012 Сообщений: 579
		1
	Визуализация карт Google 26.07.2016, 17:29. Показов 1467. Ответов 4 Метки нет (Все метки) Здравствуйте. Имеется макет карты (рисунок 1). Подскажите, как можно именно вот эти элементы (на рисунке 2 показаны стрелками) на карте нарисовать, чтобы при сдвиге карты они всегда на месте стояли, то есть было абсолютное позиционирование? Их все отдельно нужно сделать будет? Если одним изображением, то карта и двигаться то не будет? И второй вопрос - как можно так затемнить карту Google? Миниатюры 0

@Dmitrin 23 / 23 / 11 Регистрация: 04.12.2012 Сообщений: 579
	26.07.2016, 23:22 [ТС]	3
	evikza, благодарю) Завтра изучу)) 0

@evikza
	26.07.2016, 23:25 #4
	Не по теме: Dmitrin, зря вы отметили тему решенной. Я ответил только на второй вопрос. С первым сижу разбираюсь :) 0

@Dmitrin 23 / 23 / 11 Регистрация: 04.12.2012 Сообщений: 579
	27.07.2016, 10:04 [ТС]	5
	Ну, я добавил контейнер отдельно на карте и просто абсолютным позиционированием добавлял эти элементы. Для компьютеров, ноутов и планшетов - вроде неплохо. А вот для экранов телефонов не знаю, как нормально позиционировать элементы эти... 0

Визуализация карт Google

Решение