一次只打开一个信息窗口谷歌地图 [英] Open only one infowindow at a time google maps

问题描述

我正在尝试创建一个具有多个标记的google地图，一次仅允许一个信息窗口.标记是IP摄像机的位置，它们是通过红宝石获取的.我已经阅读了许多类似问题的答案，其中的解决方案是仅创建一个信息窗口并重新使用它.

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. 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 %>

})();
});

由于我使用<％@ cameras.each为每个摄像机创建一个信息窗口的方式，是否只能创建一个信息窗口? ％>?

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| %>?

推荐答案

您应该仅创建信息窗口对象的一个​​实例，并使用setContent()方法.

You should create only one instance of the infowindow object and use the setContent() method.

首先创建infowindow对象:

First create the infowindow object:

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

然后在其中创建标记并添加click事件监听器的地方:

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);
});

希望这会有所帮助.

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>

这篇关于一次只打开一个信息窗口谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！