如何更改点击按钮上的 map 标记颜色

Question

in infowindow.setContent i have button i want to change marker color button on click i tried this code

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0] + locations[i][3] + " <button class='btn btn-primary btn-sm map-checked-box mr-1' onclick='myFunction();' data-id='"+ locations[i][3] +"'>Print</button> ");
          infowindow.open(map, marker);
        }
      })(marker, i ));
    }
    function myFunction() {
  infowindow.setContent('<div style="background-color: green">' + locations[i][0] + locations[i][3] + "</div>");
} 

i am calling myfunction() but it does not work in this line i think i am misiing locations in function

infowindow.setContent(locations[i][0] + locations[i][3] + " <button class='btn btn-primary btn-sm map-checked-box mr-1' onclick='myFunction();' data-id='"+ locations[i][3] +"'>Print</button> ");

Answer 1

You cannot change the color of a marker through CSS because markers are images. You will have to set a new image to the existing marker to get an effect of the changed marker color.

General steps would be:

1. Store the marker in a variable that is available later in myFunction .
2. Update the marker image using setIcon(urlToNewImage)

Here is an example fiddle . Click on the change button to see the effect.

Refer to this link for a list of icons available online.

Answer 2

resolved by

function state(marker){ 
  marker.setIcon('http://maps.google.com/mapfiles/ms/micons/orange.png');
}