Динамическое изменение текста маркера карты Google при нажатии на ссылку

Question

Я пробовал много способов изменить текст метки в маркере при нажатии на ссылку, но не получил, где. У меня есть следующий код:

 var map = new google.maps.Map(document.getElementById('googleMap'), {
      center: {lat: 51.5078788, lng: -0.0877321},
      zoom: 16,
      disableDefaultUI: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

Затем я создаю пользовательские маркеры:

var icons = {
      main: {
        icon: 'marker.png'
      },
      locationone: {
        icon: 'marker-1.png'
      },
      locationtwo: {
        icon: 'marker-2.png'
      }
};

и устанавливаю функции:

var features = [
      {
        position: new google.maps.LatLng(51.5078788, -0.0877321),
        type: 'main'
      }, {
        position: new google.maps.LatLng(51.5078788, -0.0877321),
        type: 'locationone',
        textone: 'default text',
        textwo: 'onclick replace with this text',
        texthree: 'onclick replace with this text'
      }, {
        position: new google.maps.LatLng(51.5078788, -0.0877321),
        type: 'locationtwo',
        textone: 'default text',
        textwo: 'onclick replace with this text',
        texthree: 'onclick replace with this text'
      }
};

Затем я строю их на map:

var marker;
var i;

for (i = 0; i < features.length; i++) {
  marker = new google.maps.Marker({
    position: features[i].position,
    icon: icons[features[i].type].icon,
    map: map,
    label: { color: '#ffffff', fontWeight: 'bold', fontSize: '14px', text: String(features[i].textone) }
   });
 };

У меня есть три ссылки:

<a href="#">Show the label for textone</a>
<a href="#">Show the label for textwo</a>
<a href="#">Show the label for texthree</a>

Когда я нажимаю на одну из вышеуказанных ссылок, я бы хотел заменить текст метки. Это возможно? Как бы я это сделал?

Answer 1

Через 12 часов я нашел решение. Я надеюсь, что это помогает другим. Используя событие onclick, передайте маркер и функции, но поместите свой код в функцию возврата, в противном случае событие сработает независимо от того, щелкнете вы по нему или нет. Поместите приведенный ниже код в поле для l oop под функцией маркера:

$(".class-on-ahref").click(function(marker, i){

             return function() {
             var label = marker.getLabel();
             label.text = String(features[i].textwo);
             marker.setLabel(label); 
          }

      }(marker, i));

Создайте событие onclick для каждой ссылки.