Настройка стиля в LocalContextMapView

В этом разделе описано, как изменить внешний вид ваших карт LocalContextMapView, применив пользовательские стили и настроив значки маркеров.

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

Настроить внешний вид карт LocalContextMapView можно, применив собственные стили. Учтите, что в LocalContextMapView заданы стили по умолчанию, отличные от стандартных стилей в объектах Map.

Чтобы полностью переопределить стили LocalContextMapView по умолчанию собственными, примените массив styles:

// Set the styles in map options.
localContextMapView.map.setOptions({
  styles,
});

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

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

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

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

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

Настройка значков маркера

Вы можете настроить внешний вид значков маркера – цвет метки, цвет глифа и масштаб – при инициализации LocalContextMapView. Настройки можно установить для статического объекта (стиль значков не меняется в зависимости от состояния) или динамической функции (стиль меняется при выборе или выделении значка).

• Пользовательские стили имеют приоритет над стилями по умолчанию.
• Поддерживаются все синтаксисы цветов CSS, включая RGB, шестнадцатеричный код, HSL и кодовые слова.
• Масштаб определяется числовым значением, где 2 означает размер вдвое больше 1 и т. д. По умолчанию для разных стран задается разный масштаб. Масштаб абсолютен, поэтому передаваемое значение не меняет размер значка относительно значения по умолчанию, а задает это значение. Например, если установить масштаб 1 для всех стран, у маркеров будет одинаковый размер независимо от страны.

Как задать цвет и масштаб маркера статически

Вы можете установить цвет и масштаб маркера и глифа по умолчанию. Для этого укажите цвета в переменных glyphColor и background и числовое значение scale в pinOptionsSetup. В следующем примере значки становятся черными, глифы – белыми, а масштаб увеличивается до 2.

const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 12,
    pinOptionsSetup: {glyphColor: '#FFF', background: '#000', scale: 2},
 });

Как задать цвет и масштаб маркера динамически

Чтобы установить цвета значков и глифов в зависимости от состояния (по умолчанию, при выделении или выборе), задайте желаемые значения для каждого состояния с помощью условного оператора. Когда пользователь наводит указатель мыши на маркер, isHighlighted принимает значение true. Когда пользователь нажимает на маркер, isSelected принимает значение "true". Когда окно с информацией о месте закрывается, к маркерам снова применяется стиль по умолчанию. В следующем примере показано, как меняется стиль значка маркера в зависимости от состояния:

pinOptionsSetup: ({isSelected, isHighlighted}) => {
  if (isHighlighted) {
    return {glyphColor: 'white', background: '#990000', scale: 1.5};
  }
  if (isSelected) {
    return {glyphColor: 'rgb(0, 128, 0)', background: 'pink', scale: 2};
  }
},

Использование облачных стилей карт с библиотекой Local Context (бета)

Чтобы использовать облачные стили карт в сочетании с библиотекой Local Context (бета), выполните следующие действия:

1. Создайте карту Map с mapId и передайте ее в LocalContextMapView
2. Отключите ярлыки и значки стандартных объектов на карте (POI).
3. Отключите несколько элементов во внутренних параметрах Map (необязательно).

Создайте карту Map с mapId и передайте ее в LocalContextMapView

Чтобы добавить карту с помощью идентификатора стиля облачных карт, определите элемент map (включая идентификатор и все внутренние параметры Map) и используйте его для инициализации LocalContextMapView, как показано в следующем примере:

    function initMap() {
      const mapWithId = new google.maps.Map(document.createElement('div'),
        {center: {lat: 37.7749, lng: -122},
        zoom: 10,
        mapId: 'YOUR_MAP_ID_HERE'});
      const localContextMapView = new google.maps.localContext.LocalContextMapView({
        element: document.querySelector("#map"),
        placeTypePreferences: ["restaurant", "bar"],
        map: mapWithId,
        maxPlaceCount: 12,
      });
    };

Отключите ярлыки и значки стандартных объектов на карте (POI)

Выполните следующие действия:

1. Откройте Google Cloud Console и перейдите в раздел Стили карт.
2. В настройках стиля Объектов на карте установите в разделе Видимость значение Выкл. для ярлыков и значков.
3. В настройках стиля Объектов на карте установите в разделе Видимость значение Вкл. для значков парка.

Задайте внутренние параметры Map (необязательно)

Помимо уже установленных внутренних параметров Map, вы можете задать дополнительные параметры Map, как показано в примере ниже.

localContextMapView.map.setOptions({
  // ...
  clickableIcons: false,
});