埋め込みGoogleマップで個別に情報ウィンドウを開く

Question

Googleマップをウェブサイトに埋め込み、地図上に別のマーカーで開くための情報ウィンドウを含めるようにしています。現在、情報ウィンドウを開くことができましたが、残念ながら、最初のマーカーがクリックされたときに両方のウィンドウが開きます。

情報ウィンドウを隔離し、正しいマーカーにリンクする方法を見つける必要があります。

誰でも手助けできますか？これまでのコードは以下の通りです。

<!-- map - --> 

       <div id="map"></div> 
       <script> 
       function initMap() { 
       var map = new google.maps.Map(document.getElementById('map'), { 
       zoom: 4, 
       center: {lat: 47.852163, lng: 16.526384} 

       }); 



       var contentString1= '<div id="content">'+ 
       '<div id="siteNotice">'+ 
        '</div>'+ 
       '<h1>Caravan Salon</h1>'+ 
        '<div>'+ 
        '<p>Messe Düsseldorf, Arena-Straße, GERMANY, 40474 </p>'+ 
        '</div>'+ 
        '</div>'; 

       var infowindow1 = new google.maps.InfoWindow({ 
       content: contentString1 
       }); 
        // Caravan Salon 
       var marker = new google.maps.Marker({ 
       position: {lat: 51.263620, lng: 6.735830}, 
       map: map 
        }); 

        marker.addListener('click', function() { 
       infowindow1.open(map, marker); 
        }); 






      var contentString= '<div id="content">'+ 
       '<div id="siteNotice">'+ 
       '</div>'+ 
       '<h1 id="firstHeading" class="firstHeading">Thomas Gieger Pop up Caravans</h1>'+ 
       '<div id="bodyContent">'+ 
       '<p>Hummelbühel, 569 7000, Eisenstadt, Austria </p>'+  '</div>'+ 
       '</div>'; 


       var infowindow2 = new google.maps.InfoWindow({ 
       content: contentString 
       }); 
       // Thomas Gieger 
       var marker2 = new google.maps.Marker({ 
        position: {lat: 47.852163, lng: 16.526384}, 
        map: map  

        }); 
        marker.addListener('click', function() { 
        infowindow2.open(map, marker2); 
        }); 
        } 
       </script> 







      <script async defer 
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCbKJArdmwTF9-_qQa10SovlgJO2kNRo9c&callback=initMap"> 
      </script> 

Answer 1

あなたはタイプミスがあります

marker.addListener('click', function() { 
    infowindow2.open(map, marker2); 
}); 

は次のようになります。

marker2.addListener('click', function() { 
    infowindow2.open(map, marker2); 
}); 

proof of concept fiddle