[英]Open only one infowindow at a time google maps
Im trying to create a google map with multiple markers that allows only one info window at a time.我试图创建一个带有多个标记的谷歌地图,一次只允许一个信息窗口。 The markers are the locations of IP cameras and they are fetched through ruby.
标记是 IP 摄像机的位置,它们是通过 ruby 获取的。 I've read loads of answers to similar questions whereby the solution is to create only one info window and re-use it.
我已经阅读了大量类似问题的答案,解决方案是仅创建一个信息窗口并重新使用它。
I have tried to implement the solutions from a number of other questions but I can't get it to work.我试图从许多其他问题中实施解决方案,但我无法让它发挥作用。
$(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 %>
})();
});
Is it possible to create just one info window due to the way I am creating an info window for each camera with <% @cameras.each do |c|由于我使用 <% @cameras.each do |c| 为每台摄像机创建信息窗口的方式,是否可以只创建一个信息窗口%>?
%>?
You should create only one instance of the Info window object and use the setContent()
method unless you need to have multiple Info windows open at the same time.除非您需要同时打开多个信息窗口,否则您应该只创建信息窗口对象的一个实例并使用
setContent()
方法。
First create the Info window object:首先创建信息窗口对象:
var infowindow = new google.maps.InfoWindow();
Then where you create your marker and add the click event listener:然后在其中创建标记并添加单击事件侦听器:
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent('set the infowindow content here');
infowindow.open(map, marker);
});
Hope this helps.希望这可以帮助。
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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk "></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.