Change the color of google marker based on the selection made in the html table

Question

I have a html table which consist of list of location information and its location is shown in a google map with a marker. Now when I click on the change button in that given table row, the related marker color is to be changed. I have tried following code, but it is changing only 1 marker color.

var beaches = [
  ["Haringhata", 21.984606, 89.974250],
  ["West Bengal, India",
    21.681855, 88.584980
  ]
];
var markers = [];
var map;


function changeColor(clickEvent) {
  this.marker_point.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
}

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: new google.maps.LatLng(beaches[0][1], beaches[0][2]),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var infowindow = new google.maps.InfoWindow();
  var marker, i;
  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };

  for (i = 0; i < beaches.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
      map: map
    });
    this.marker_point = marker;
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(beaches[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
    markers.push(marker);
  }
}
google.maps.event.addDomListener(window, "load", initialize);


$(function() {
  $('.deleteMarker').on('click', function(e) {
    var dataId = $(this).closest('td')[0].dataset.id;
    changeColor(dataId);
  });
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<table id="sum_table">
  <tr class="titlerow">
    <th>S.N.</th>
    <th>Community</th>
    <th width="18%">Action</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Haringhata</td>
    <td data-id="0"><button class="deleteMarker">Change</button></td>
  </tr>
  <tr>
    <td>2</td>
    <td>West Bengal, India</td>
    <td data-id="1"><button class="deleteMarker">Change</button></td>
  </tr>
</table>
<div id="map"></div>

Answer 1

You have a typo in your code:

function changeColor(clickEvent) {
  this.marker_point.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
}

should be:

function changeColor(clickEvent) {
  markers[clickEvent].setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
}

this in that event listener refers to the window object, there is only ever one window.marker_point (the last one set in your loop). Click event is the data-id from the HTML, use it to reference the correct marker from the markers array.

This is the same issue that is addressed in the infowindow listener function closure in the question Google Maps JS API v3 - Simple Multiple Marker Example, and is a common problem with asynchronous function variables in loops.

var beaches = [
  ["Haringhata", 21.984606, 89.974250],
  ["West Bengal, India",
    21.681855, 88.584980
  ]
];
var markers = [];
var map;


function changeColor(clickEvent) {
  markers[clickEvent].setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
}

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: new google.maps.LatLng(beaches[0][1], beaches[0][2]),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var infowindow = new google.maps.InfoWindow();
  var marker, i;
  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };

  for (i = 0; i < beaches.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
      map: map
    });
    this.marker_point = marker;
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(beaches[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
    markers.push(marker);
  }
}
google.maps.event.addDomListener(window, "load", initialize);


$(function() {
  $('.deleteMarker').on('click', function(e) {
    var dataId = $(this).closest('td')[0].dataset.id;
    changeColor(dataId);
  });
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<table id="sum_table">
  <tr class="titlerow">
    <th>S.N.</th>
    <th>Community</th>
    <th width="18%">Action</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Haringhata</td>
    <td data-id="0"><button class="deleteMarker">Change</button></td>
  </tr>
  <tr>
    <td>2</td>
    <td>West Bengal, India</td>
    <td data-id="1"><button class="deleteMarker">Change</button></td>
  </tr>
</table>
<div id="map"></div>