一次只能打開一個infowindow谷歌地圖

Question

我試圖用多個標記一次創建一個只允許一個信息窗口的谷歌地圖。標記是IP攝像機的位置，它們通過紅寶石獲取。我讀過類似問題的答案，因此解決方案是隻創建一個信息窗口並重新使用它。

我試圖從一些其他問題實施解決方案，但我無法讓它工作。

$(document).ready(function() { 
// execute 
(function() { 
    // map options 
    var options = { 
    zoom: 2, 
    center: new google.maps.LatLng(25, 10), // centered US 
    mapTypeControl: false, 
    streetViewControl: false 
    }; 

    // init map 
    var map = new google.maps.Map(document.getElementById('map-canvas'), options); 

    // set multiple marker 
    <% @cameras.each do |c| %> 
    // init markers 
    <% if c.deep_fetch(:location) {} != nil %> 

    var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(<%= c.deep_fetch(:location, :lat) {} %>, <%= c.deep_fetch(:location, :lng) {} %>), 
    map: map, 
    title: 'Click Me ' 
    }); 

    // process multiple info windows 
    (function (marker) { 
    // add click event 
    google.maps.event.addListener(marker, 'click', function() { 
     infowindow = new google.maps.InfoWindow({ 
     content: "<%= preview(c, true) %>"+ 
      '<h5><%= c["name"] %></h5>'+ 
      '<p><a href="/publiccam/<%= c['id'] %>">View Camera</a></p>' 

     }); 

     infowindow.open(map, marker, this); 
    }); 
    })(marker); 
    <% end %> 
    <% end %> 

})(); 
}); 

是否有可能是由於我與<％@ cameras.each做創建每個攝像頭的信息窗口的方式只創建一個信息窗口| C | ％>？

Answer 1

您應該只創建infowindow對象的一個​​實例並使用setContent()方法。

首先創建信息窗口對象：

var infowindow = new google.maps.InfoWindow(); 

然後在其中創建您的標記並添加點擊事件監聽器：

google.maps.event.addListener(marker, 'click', function() { 

    infowindow.setContent('set the infowindow content here'); 
    infowindow.open(map, marker); 
}); 

希望這有助於。

var map = null; 
 
var infowindow = new google.maps.InfoWindow(); 
 

 
function initialize() { 
 

 
    var myOptions = { 
 
    zoom: 8, 
 
    center: new google.maps.LatLng(43.907787, -79.359741), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 

 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
 
    myOptions); 
 

 
    google.maps.event.addListener(map, 'click', function() { 
 
    infowindow.close(); 
 
    }); 
 

 
    // Add markers to the map 
 
    // Set up three markers with info windows 
 

 
    var point; 
 

 
    point = new google.maps.LatLng(43.65654, -79.90138); 
 
    createMarker(point, 'This is point 1'); 
 

 
    point = new google.maps.LatLng(43.91892, -78.89231); 
 
    createMarker(point, 'This is point 2'); 
 

 
    point = new google.maps.LatLng(43.82589, -79.10040); 
 
    createMarker(point, 'This is point 3'); 
 
} 
 

 
function createMarker(latlng, html) { 
 

 
    var marker = new google.maps.Marker({ 
 
    position: latlng, 
 
    map: map 
 
    }); 
 

 
    google.maps.event.addListener(marker, 'click', function() { 
 

 
    infowindow.setContent(html); 
 
    infowindow.open(map, marker); 
 
    }); 
 
} 
 

 
initialize();

#map_canvas { 
 
    height: 200px; 
 
}

<div id="map_canvas"></div> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script>