Кастомизация карты с локальным контекстом

В этом примере мы применили к базовой карте Вайкики (штат Гавайи) собственную цветовую гамму с насыщенными тропическими цветами. Мы также установили для maxPlaceCount значение 18, чтобы показать на карте больше объектов.

Как читать код

Доступ к базовой карте

Доступ к базовой карте выполняется с помощью свойства map объекта google.maps.localContext.LocalContextMapView. Эта карта – обычный объект класса google.maps.Map, и поэтому к ней можно применять все параметры и методы, доступные для этого класса. Например, вы можете добавить собственные маркеры и прослушиватели событий.

var marker = new google.maps.Marker({position: center, map:  localContextMapView.map});
localContextMapView.map.addListener('click', () => {
    localContextMapView.hidePlaceDetailsView();
  });

Применение собственных стилей

Поскольку стили google.maps.localContext.LocalContextMapView.map по умолчанию отличаются от стандартных стилей Map, вы можете либо переопределить значения по умолчанию, либо объединить свои настройки с библиотекой локального контекста. Подробнее…

В примере ниже показано, как задать пользовательские стили из массива stylesArray поверх стилей LocalContextMapView по умолчанию.

TypeScript

// Merge map styles.
const mergedStyles = map.get("styles").concat(styles);

map.setOptions({
  center: center,
  zoom: 14,
  styles: mergedStyles,
});

JavaScript

// Merge map styles.
const mergedStyles = map.get("styles").concat(styles);

map.setOptions({
  center: center,
  zoom: 14,
  styles: mergedStyles,
});

Добавление собственного маркера

В примере ниже показано, как поставить в центральную точку карты значок отеля вместо значка по умолчанию (красного маркера). Узнайте, как создать собственный маркер, изменив свойства label и icon объекта Marker.

По умолчанию собственные маркеры отображаются под маркерами POI библиотеки локального контекста. Чтобы избежать перекрытия, задайте для свойства маркера zIndex более высокое значение, чем у maxPlaceCount.

TypeScript

// Add a marker at the center point
new google.maps.Marker({
  position: center,
  map: map,
  icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAdUlEQVR4AWMYOWAU/AfhYWMBCxA3A/FlIN4MxN7I6gjg80DcD8QC+CzIxqIxH6aOSHwfYQmmBZexuQymjgTcj8uCz1gUHybDgvO4LFiMRXE4GRb8x2UBDxCXQ8PxPdSrLNSxAD+g3ALCeNQCKoHhZcHAg1EAAM3cyWj3TGxhAAAAAElFTkSuQmCC",
  zIndex: 30,
});

JavaScript

// Add a marker at the center point
new google.maps.Marker({
  position: center,
  map: map,
  icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAdUlEQVR4AWMYOWAU/AfhYWMBCxA3A/FlIN4MxN7I6gjg80DcD8QC+CzIxqIxH6aOSHwfYQmmBZexuQymjgTcj8uCz1gUHybDgvO4LFiMRXE4GRb8x2UBDxCXQ8PxPdSrLNSxAD+g3ALCeNQCKoHhZcHAg1EAAM3cyWj3TGxhAAAAAElFTkSuQmCC",
  zIndex: 30,
});

Примеры кода