Настройка карты Google: пользовательские маркеры

Обзор

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

На следующем примере карты показано использование настраиваемых маркеров для обозначения различных типов местоположений.

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

Настройка маркера карты

Вы можете изменить значок красного маркера по умолчанию ( ) на изображение по вашему выбору. В следующем примере показано, как заменить значок по умолчанию пользовательским PNG.

// A marker with a with a URL pointing to a PNG.
const beachFlagImg = document.createElement("img");

beachFlagImg.src =
  "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";

const beachFlagMarkerView = new AdvancedMarkerElement({
  map,
  position: { lat: 37.434, lng: -122.082 },
  content: beachFlagImg,
  title: "A marker using a custom PNG Image",
});

Узнайте еще больше способов создания графических маркеров .

Настройка маркеров по функциям карты

Каждая точка интереса в списке объектов кампуса имеет атрибут type . Обратите внимание, как приведенный ниже фрагмент кода определяет типы parking , library и info . Вы можете настроить значок маркера в зависимости от type объекта карты, для которого вы его установили.

const iconBase =
  "https://developers.google.com/maps/documentation/javascript/examples/full/images/";

const icons: Record<string, { icon: string }> = {
  parking: {
    icon: iconBase + "parking_lot_maps.png",
  },
  library: {
    icon: iconBase + "library_maps.png",
  },
  info: {
    icon: iconBase + "info-i_maps.png",
  },
};

function addMarker(feature) {
  const iconImage = document.createElement("img");
  iconImage.src = icons[feature.type].icon;
  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: feature.position,
    content: iconImage,
  })
}

addMarker(features[0]);