Google Maps настроен для обновления пути (не URL)

Question

Мне не удается найти какую-либо документацию по обновлению пути значка (маркера) в API Карт Google. В этом конкретном примере я пытаюсь изменить fillOpacity значка с 0 на 1.

var myIcon = {
  path: google.maps.SymbolPath.CIRCLE,
  scale: 5,
  fillColor: "#ff00ff",
  fillOpacity: 0,
  strokeColor: "#ff00ff",
  strokeWeight: 2
};

var marker = new google.maps.Marker({
  position: position,
  icon: myIcon,
  map: map,
  title: 'My Marker>' 
});

marker.addListener('click', function() {
  this.setOptions({icon:{fillOpacity: 0.5}}); // Not working
  this.setIcon({fillOpacity: 0.2}); // Not working either
});

Answer 1

«Значок» является анонимным объектом. Вам нужно снова установить весь объект:

marker.addListener('click', function() {
  myIcon.fillOpacity = 0.5;
  this.setIcon(myIcon);
});

или

marker.addListener('click', function() {
  myIcon.fillOpacity = 0.5;
  this.setOptions({
    icon: myIcon
  }); 
});

подтверждение концепции скрипки

фрагмент кода:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
      lat: -25.363882,
      lng: 131.044922
    }
  });
  var myIcon = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 5,
    fillColor: "#ff00ff",
    fillOpacity: 0,
    strokeColor: "#ff00ff",
    strokeWeight: 2
  };

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: myIcon,
    map: map,
    title: 'My Marker>'
  });

  marker.addListener('click', function() {
    myIcon.fillOpacity = 0.5;
    this.setIcon(myIcon);
  });
}

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>