한 번에 하나의 정보창 만 엽니 다. Google지도

Question

한 번에 하나의 정보 창만 허용하는 여러 마커가있는 Google지도를 만들려고합니다. 마커는 IP 카메라의 위치이며 루비를 통해 가져옵니다. 비슷한 질문에 대한 답을 많이 읽었습니다. 하나의 정보 창만 만들고 다시 사용하는 것이 해결책입니다.

다른 여러 가지 질문으로 솔루션을 구현하려했지만 제대로 작동하지 않습니다. C |

$(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 할 각 카메라에 대한 정보 창을 만드는 오전 방식에 하나의 정보 창을 만드는 것입니다 | %>?

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>