Google Maps API | Расширенный маркер (JavaScript) – изменить цвет маркера

Вопрос или проблема

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap&sensor=false&language=it&libraries=marker"></script>

<script type="text/javascript">
function carica_variabili() {

//определение координат, на которые следует центрировать карту
//инициализация массивов
var lat = new Array();
var long = new Array();
var descr = new Array();
var icona = new Array();

 lat[0]="44.8814093";
 long[0]="10.9912888";
 descr[0]="TCA PRODUCTION Srl (004176)";

 lat[1]="45.5193158";
 long[1]="10.1769702";
 descr[1]="GRAZIOLI SRL (007484)";

var lat_centro = lat[0];
var long_centro = long[0];

//Опции карты: уровень зума 14, центрирована на определенной точке,
var Opzioni = {
        zoom: 8, center: new google.maps.LatLng(lat_centro, long_centro),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: false   }

var map = new google.maps.Map(document.getElementById("map_canvas"), Opzioni);
//цикл FOR для чтения значений массивов и их отображения на
//карте
var i = 0;
for (i=0; i<lat.length; i++)
    { // var marker = new google.maps.marker({
        var marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat[i], long[i]),
      map: map,
      label: "A",
      //animation: google.maps.Animation.DROP,
      title: descr[i]});

      }

}
</script>

Ответ или решение

Изменение цвета маркеров Google Maps с использованием AdvancedMarkerElement

Введение

Доброе утро! В данной статье мы подробно рассмотрим, как изменить цвет маркеров на карте Google Maps с использованием JavaScript и библиотеки Advanced Marker. Google Maps API предоставляет множество функций, которые позволяют настраивать маркеры, и в этой статье мы сосредоточимся на том, как это сделать.

Установка Google Maps API и его библиотек

Сначала необходимо убедиться, что вы подключили нужные библиотеки Google Maps в вашем HTML-файле. Ваша строчка подключения выглядит верно, однако убедитесь, что вы добавили правильный ключ API и включили библиотеки маркеров:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=marker" async defer></script>

Создание карты и добавление маркеров

В вашем коде вы уже создали основную структуру для инициализации карты и добавления маркеров. Теперь мы внесем изменения для создания маркеров с возможностью изменения их цвета.

Пример реализации

Вот как можно изменить ваш существующий код, чтобы использовать AdvancedMarkerElement и задать цвет маркера:

<script type="text/javascript">
  function initMap() {
    var lat = [44.8814093, 45.5193158];
    var long = [10.9912888, 10.1769702];
    var descr = ["TCA PRODUCTION Srl (004176)", "GRAZIOLI SRL (007484)"];

    var map = new google.maps.Map(document.getElementById("map_canvas"), {
      zoom: 8,
      center: new google.maps.LatLng(lat[0], long[0]),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
    });

    // Цикл для создания маркеров
    for (var i = 0; i < lat.length; i++) {
      createAdvancedMarker(lat[i], long[i], descr[i], map);
    }
  }

  function createAdvancedMarker(lat, long, title, map) {
    var markerElement = new google.maps.marker.AdvancedMarkerElement({
      position: { lat: lat, lng: long },
      title: title,
      map: map,
      content: document.createElement('div'),
    });

    // Создайте элемент с нужным цветом
    var pinElement = document.createElement('div');
    pinElement.style.backgroundColor = 'red'; // Здесь вы можете задать нужный вам цвет
    pinElement.style.width = '20px'; // Ширина маркера
    pinElement.style.height = '20px'; // Высота маркера
    pinElement.style.borderRadius = '50%'; // Для создания круглой формы
    pinElement.style.color = 'white'; // Цвет текста
    pinElement.style.display = 'flex';
    pinElement.style.alignItems = 'center';
    pinElement.style.justifyContent = 'center';
    pinElement.innerText = 'A'; // Метка или текст, который вы хотите отобразить

    markerElement.content.appendChild(pinElement);

    // Убедитесь, что маркер обновляется
    markerElement.setMap(map);
  }
</script>

Объяснение кода

1. initMap: В этом методе инициализируется карта и вызывается функция для создания маркеров. Мы создаем массивы для хранения координат и описаний, чтобы перебрать их в цикле.

2. createAdvancedMarker: Эта функция отвечает за создание маркеров. Внутри мы создаем AdvancedMarkerElement и устанавливаем его позицию на карте.

3. Создание кастомизированного маркера: Внутри функции мы создаем новый элемент с определенным фоном, размером и стилем. Параметр backgroundColor позволяет задать любой цвет для вашего маркера.

Заключение

С помощью этого подхода вы можете легко управлять цветом ваших маркеров на карте Google Maps. Использование AdvancedMarkerElement предоставляет много возможностей для кастомизации, и вы можете легко адаптировать представленный пример под свои нужды. Не забудьте протестировать код, чтобы убедиться в его корректной работе.

Если у вас остались вопросы или вам необходимо больше деталей, не стесняйтесь обращаться. Удачи в ваших проектах!