Google Maps Marker zu ändern OnClick

Question

Ich habe derzeit eine Google Map in meine Website integriert. Ich habe 2 Google Map Marker in der Karte.

Bei Mouseover und Mouseout ändern sich diese beiden Markerbilder wie gewünscht. Das funktioniert alles.

Ich habe es eingerichtet, dass, sobald ein Marker geklickt wird, die Seite URL ändert und neu geladen wird. Das funktioniert alles gut.

Mein Problem ist, dass ich möchte, dass sich mein Google Marker-Symbol auch ändert, wenn der Marker angeklickt wird.

Also um es einfach zu machen.

• Markierung A = angeklickt.

  Neue Seitenlasten von Marker A wird angeklickt.

  Marker A sollte das Symbol auf der neuen Seite ändern.

Ich hoffe, ich habe erklärt dies ein straight forward Weg. Hier ist mein aktueller Code.

var iconBase = window.location.origin + '/assets/images/map_red_small_full_icon.png'; 

var marker = new google.maps.Marker({ 
position: {lat: 54.339549, lng: -5.266286}, 
map: map, 
icon: iconBase 
}); 

marker.addListener('click', function() { 
    window.history.pushState('obj', 'newtitle', '/locations#marker1'); 
    marker.setIcon(iconBasetitle); 
    location.reload(); 
    $('body').scrollTop(0); 
}); 

So ist die URL geändert basiert auf, wenn die Markierung geklickt wird. Die neue Seite wird geladen, aber die Markierung ändert sich nicht.

Kann mir jemand erklären, was ich vermisse?

Danke

Answer 1

Ich nehme an, dass iconBasetitle das neue Symbol ist, wenn der marquer geklickt wurde.

Da die Seite neu geladen wird, wird auch das gesamte Skript neu geladen.
So wird Ihre Marquer auf ihren ursprünglichen Zustand zurückgesetzt.

Sie müssen nur etwas in das Skript einfügen, um das Symbol basierend auf dem Hash zu ändern, den Sie in der URL hinzugefügt haben.

So etwas wie dies wahrscheinlich tun:

if(window.location.hash) { 
    var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character 
    if(hash=="marker1"){ 
     marker.setIcon(iconBasetitle); 
    } 
}