Googleマップ変更するマーカーOnClick

Question

現在、私のウェブサイトにGoogleマップが統合されています。私はマップ内に2つのGoogleマップマーカーを持っています。

マウスオーバーおよびマウスアウト時に、これらのマーカー画像は両方とも必要に応じて変化します。それはすべて動作しています。

マーカーをクリックすると、ページのURLが変更されてリロードされます。これはすべて正常に動作しています。

私の問題は、マーカーをクリックしたときにも私のGoogleマーカーアイコンを変更したいということです。

だから簡単にする。

• マーカーA =クリックした。

  新しいページがマーカーAから読み込まれました。

  マーカーAは新しいページのアイコンを変更する必要があります。

これは簡単な説明です。ここに私の現在のコードです。

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

ので、URLは、マーカーがクリックされたときに基づいて変更されます。 Newページがロードされますが、マーカーは変更されません。

私が逃しているものは誰でも説明できますか？

はありがとう

Answer 1

私はmarquerがクリックされたときiconBasetitleは、新しいアイコンであると仮定します。

ページがリロードされるため、スクリプト全体がリロードされます。
あなたのマーキーは元の状態にリセットされます。

URLに追加したハッシュに基づいてアイコンを変更するには、スクリプトに何かを追加するだけです。このような

何かはおそらく行います：

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