ändert Google Maps Marker auf Klick

Question

Hey Ich habe ein Produkt Schleife, wo jedes Produkt seinen eigenen Daten-Standort hat = „number“

Ich mag nach dem Markierungssymbol auf Klick auf eine der Schaltflächen zu ändern, um die Lage sein, zu seinem Standort.

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

so dass Marker mit Daten-location = "80" wird grün oder ändert das Bild auf Klick

hier ist meine addMarker Funktion

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, 
    }); 
} 

lassen Sie mich wissen, wenn Sie weitere Informationen benötigen

Answer 1

Sie können mit SetIcon tun

marker.setIcon('newImage.png'); 

Sie sollten eine Reihe von Markern mit dem Marker bevölkert verwenden Sie

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]; 

}

dann erstellen Sie eine Funktion auf Klick auf den Button mit einem ref Marker-ID

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

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

verwenden können