点击即可更改谷歌地图标记

Question

Hey I have a product loop where each product has its own data-location="number"

I want to be able to change the marker icon on click of one of the buttons according to its location.

<button class="btn" data-location="80"></button>
<button class="btn" data-location="81"></button>
<button class="btn" data-location="82"></button>

so that marker with data-location="80" becomes green or changes the image on click

here is my addMarker function

function addMarker(location) {
    location.Position = { 
        lat: parseFloat(location.mapURL.split(',')[0]),
        lng: parseFloat(location.mapURL.split(',')[1]) 
    };

    location.Marker = new google.maps.Marker({
        icon: 'images/map-marker-blue-2.png',
        map: map,
        position: location.Position,
        title: location.name,
    });
}

let me know if you need more info

Answer 1

You can do with setIcon

 marker.setIcon('newImage.png'); 

You should use an array of markers populated with the marker you create

var markers ;
function addMarker(location) {
  location.Position = { 
    lat: parseFloat(location.mapURL.split(',')[0]),
    lng: parseFloat(location.mapURL.split(',')[1]) 
};

location.Marker = new google.maps.Marker({
    icon: 'images/map-marker-blue-2.png',
    map: map,
    position: location.Position,
    title: location.name,
});
markers.push[location.Marker];

}

then you can use a function on click of the button with a ref to marker id

<button class="btn" data-location="80" onclick="changeMarker(80);"></button>

function changeMarker(id){
   markers[id].setIcon('newImage.png'); 
}