使用 ejs 时如何使 google 地图引脚打开和关闭信息 windows

Question

我正在尝试加载位置信息以及其他数据并为每个图钉显示它。我正在努力做到这一点：

一次只显示一项信息 window。
每个标记都会在点击时打开他们的信息 window。
任何其他信息 windows 将在打开新信息时关闭。

这是我的代码。现在，它会导致所有信息 windows 同时匿名打开。所有信息 windows 关闭后保持关闭状态。

<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
    function initialize() {
        var mapProp = {
            center:new google.maps.LatLng(43.083849,-77.675075),
            zoom:16,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);



        function addMarkers(map, loc, title, hour, name) {

            new google.maps.InfoWindow({
                content: "<div class='info'><br><h3 class='infotitle'>" + title + "</h3><br>" +
                "<p class='infodesc'>For " + hour + " hours</p><br>" +
                "<p>Posted by: " + name + "</p></div>"

            }).open(map, new google.maps.Marker({
                position: loc,
                label: '',
                map: map,
                title: 'Place1'
            }));

        }
        <% for(var i=0; i<names.length; i++) { %>
            addMarkers(map, {lat: <%= lats[i] %>, lng: <%= longs[i] %>}, "<%= titles[i] %>", "<%= parseFloat(hours[i]).toFixed(1) %>", "<%= names[i] %>"  );
        <% } %>
    }
    google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

试试这个

var infoWindow = new google.maps.InfoWindow();
function addMarkers(map, loc, title, hour, name) {
    var marker = new google.maps.Marker({
       position: loc,
       label: '',
       map: map,
       title: 'Place1'
    })
    var content = "<div class='info'><br><h3 class='infotitle'>" + title + "</h3><br>" +
            "<p class='infodesc'>For " + hour + " hours</p><br>" +
            "<p>Posted by: " + name + "</p></div>";
    google.maps.event.addListener(marker, "click", function () {
       infoWindow.setContent(content);
       infoWindow.open(map, this);
    });   
}

使用 ejs 时如何使 google 地图引脚打开和关闭信息 windows

How do I make google maps pins open and close info windows while using ejs

html

javascript

google-maps

ejs