-1

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> ");
  • possible duplicate of [Change google map marker icon when clicking button inside infowindow](https://stackoverflow.com/questions/63352007/change-google-map-marker-icon-when-clicking-button-inside-infowindow) – geocodezip Oct 26 '20 at 11:17
  • possible duplicate of [By clicking a button, that's on a infowindow of a specific marker, I want the marker to change color depending on which button I click](https://stackoverflow.com/questions/57556534/by-clicking-a-button-thats-on-a-infowindow-of-a-specific-marker-i-want-the-ma) – geocodezip Oct 26 '20 at 11:18

2 Answers2

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.

ihimv
  • 1,308
  • 12
  • 25
0

resolved by

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