在嵌入的 Google 地图上单独打开信息 windows

Question

我正在尝试在网站上嵌入 Google 地图，并包含信息 windows 以在地图上的单独标记上打开。目前我已经能够获取信息 windows 打开，但不幸的是，当第一个标记被点击时，两个 windows 都打开了。

需要找到一种方法将信息 windows 和 link 隔离到正确的标记。

有人可以帮忙吗？到目前为止的代码附在下面。

<!-- 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

在嵌入的 Google 地图上单独打开信息 windows

Open info windows separately on an embedded Google Map

javascript

google-maps

infowindow