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

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

1 个答案: