thisishappi
@thisishappi
Верстальщик=)

Как реализовать цветовую схему google maps + gmaps.js?

Имеется карта реализованная через gmaps.js

var map;
		$(document).ready(function(){
			pacientamMapCenter = new GMaps({
				el: '#pacientam-map-center',
				lat: 55.794612,
				lng: 37.392121,
				zoomControl : true,
				zoom: 17,
				zoomControl: false,
				mapTypeControl: false,
				scaleControl: false,
				streetViewControl: false,
				rotateControl: false
			});
			pacientamMapCenter.addMarker({
				lat: 55.794612,
				lng: 37.392121
			});
		});


Вопрос в том:
1. Каким образом поменять цветовую схему самой карты ( например saturation: -100);
2.Каким образом добавить стилизированный маркер.
Поменять цветовую схему без gmaps - понятно.
Но как можно их совместить, и можно ли?
  • Вопрос задан
  • 379 просмотров
Решения вопроса 1
thisishappi
@thisishappi Автор вопроса
Верстальщик=)
function initMap() {
			var customMapType = new google.maps.StyledMapType([
				{
					stylers: [
						{saturation: -100}
					]
				}
			], {
				name: 'Custom Style'
			});

			var customMapTypeId = 'custom_style';

			var map = new google.maps.Map(document.getElementById('index-map'), {
				zoom: 4,
				center: {lat: 54.794612, lng: 70.7},
				mapTypeControlOptions: {
					mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
				}
			});

			map.mapTypes.set(customMapTypeId, customMapType);
  			map.setMapTypeId(customMapTypeId);

  			var contentString = '<div>TEST</div>';

			var infowindow = new google.maps.InfoWindow({
				content: contentString,
				maxWidth: 400
			});

			var marker = new google.maps.Marker({
				position: {lat:53, lng: 65},
				map: map,
				icon: '/images/icons/index-marker.png'
			});

			marker.addListener('click', function() {
				infowindow.open(map, marker);
			});

		}
		initMap();
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Ravell
@Ravell
Верстайло
Думаю вам поможет эта страница
В самом низу кнопка "Get code" которая выдает код с настройками

Если в поле "Add Locations" указать какую нибудь точку, то потом в коде вы увидите путь к картинке маркера
что-то типа: 'https://mapbuildr.com/assets/img/markers/default.png'
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы