在嵌入式谷歌地图上单独打开信息窗口

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

概念验证小提琴