Change google map marker icon when clicking button inside infowindow

Question

I have multiple markers on the map that I have imported from JSON. Inside the marker infowindow I have a button and when clicking on that, I want to change the marker image. Please check my code below. Marker list and Infowindow is working fine. I just want to do some actions on the button that is inside infowindow.

var workerlist;
var jobprice;
var price;
var map;
var list;
var position;
var image;
var image1;
var marker;

function myMap() {
  var mapProp= {
    center:new google.maps.LatLng(30.7333,76.7794),
    zoom:10,
    disableDefaultUI: true
  };
  map = new google.maps.Map(document.getElementById("map"),mapProp);
  
  image = 'images/blue_marker1.png';
  image1 = 'images/pink_marker1.png';
 
  console.log(workerlist);
  for (var i = 0; i < workerlist.length; i++) {
    list = workerlist[i];
    price = jobprice;
    position = new google.maps.LatLng(list.latitude,list.longitude);
    addMarker(map,list,price,position,marker);
  }
  
}

function addMarker(map,list,price,position,marker){
  marker = new  google.maps.Marker({
    position: position,
    title: list.name,
    map: map,
    icon: image
  });
  var contentString = '<div class="mapBox">'+
  '<div class="content"> <h3>'+ list.name +
  '</h3>'+
  '<h6>(2.1 miles from the job venue)</h6>' +
  '<div class="rating"></div>'+
  '<p>Total cost to hire:</p>'+
  '<p>Rate: $' + price.Price + ' per hour</p>'+
  '<p>Total Cost: $'+ price.total_amount +'</p>'+
  '</div><button id="shortList" class="btn btn-shortlist" onclick="shortList()">Shortlist for the JOb</button>'+
  '</div>';

  marker.addListener('click', function() {
    if (typeof infowindow != 'undefined') infowindow.close();
      infowindow = new google.maps.InfoWindow({
      content: contentString,
    })
    infowindow.open(map,marker)
    $("#shortList").click(function(){
      image = 'images/pink_marker1.png';
    });
  });
  
}

function shortList(){
  //  alert('clicked');
  // infowindow.close();
  //marker.setIcon(image1);
}

Answer 1

Before you can access the <button id="shortList"> in the DOM with JQuery, it needs to be added to the DOM. That happens asynchronously when the InfoWindow content is rendered, the domready event on the InfoWindow fires when it is available.

google.maps.event.addListener(infowindow, 'domready', function() {
  $("#shortList").click(function() {
    // code here to change the icon
  });
});

related question: How to detect button click in googlemaps infowindow

If you want the icon of the marker to change, you need to call .setIcon on the marker:

  marker.addListener('click', function() {
    if (typeof infowindow != 'undefined') infowindow.close();
    infowindow = new google.maps.InfoWindow({
      content: contentString,
    })
    infowindow.open(map, marker)
    var that = this; // save reference to marker to change its icon
    google.maps.event.addListener(infowindow, 'domready', function() {
      $("#shortList").click(function() {
        image = 'http://maps.google.com/mapfiles/ms/micons/orange.png';
        that.setIcon(image);
      });
    });
  });

proof of concept fiddle

code snippet:

var workerlist;
var jobprice = {
  Price: "$10",
  total_amount: "$100"
};
var price;
var map;
var list;
var position;
var image;
var image1;
var marker;
workerlist = [{
    name: "Chandigarth",
    latitude: 30.7333,
    longitude: 76.7794
  },
  {
    name: "Chandigarth2",
    latitude: 30.7,
    longitude: 76.7
  }
]

function myMap() {
  var mapProp = {
    center: new google.maps.LatLng(30.7333, 76.7794),
    zoom: 10,
    disableDefaultUI: true
  };
  map = new google.maps.Map(document.getElementById("map"), mapProp);

  image = 'http://maps.google.com/mapfiles/ms/micons/blue.png';
  image1 = 'http://maps.google.com/mapfiles/ms/micons/orange.png';

  console.log(workerlist);
  for (var i = 0; i < workerlist.length; i++) {
    list = workerlist[i];
    price = jobprice;
    position = new google.maps.LatLng(list.latitude, list.longitude);
    addMarker(map, list, price, position, marker);
  }

}

function addMarker(map, list, price, position, marker) {
  marker = new google.maps.Marker({
    position: position,
    title: list.name,
    map: map,
    icon: image
  });
  var contentString = '<div class="mapBox">' +
    '<div class="content"> <h3>' + list.name +
    '</h3>' +
    '<h6>(2.1 miles from the job venue)</h6>' +
    '<div class="rating"></div>' +
    '<p>Total cost to hire:</p>' +
    '<p>Rate: $' + price.Price + ' per hour</p>' +
    '<p>Total Cost: $' + price.total_amount + '</p>' +
    '</div><button id="shortList" class="btn btn-shortlist" onclick="shortList()">Shortlist for the JOb</button>' +
    '</div>';

  marker.addListener('click', function() {
    if (typeof infowindow != 'undefined') infowindow.close();
    infowindow = new google.maps.InfoWindow({
      content: contentString,
    })
    infowindow.open(map, marker)
    var that = this;
    google.maps.event.addListener(infowindow, 'domready', function() {
      $("#shortList").click(function() {
        image = 'http://maps.google.com/mapfiles/ms/micons/orange.png';
        that.setIcon(image);
      });
    });
  });

}

function shortList() {
  //  alert('clicked');
  // infowindow.close();
  //marker.setIcon(image1);
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Info Windows</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=myMap&libraries=&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
</body>

</html>