打开其他时如何关闭信息多头？

Question

I have displayed my positions in the map like this:

<script type="text/javascript" src="https://maps-api-ssl.google.com/maps/api/js?v=3&amp;sensor=true"></script>
<script type="text/javascript">
    var map;
    var markers = new Array();
    var infos = new Array();

    jQuery(document).ready(function(){
        var mapOptions = {
                zoom: 2,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        {% for position in positions %}
            var address = '{{ position.map_position }}';
            geocoder = new google.maps.Geocoder();
            geocoder.geocode( { 'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var content_html  = '<div>';
                    content_html += '<label style="font-weight:bold;">country name : </label>{{ position.country.country_name }}<br/>';
                    content_html += '<label style="font-weight:bold;">city name : </label>{{ position.city.city_name }}<br/>';
                    {% if position.related > 1 %}
                    content_html += '<a style="color:black;" href="Mylink">My link</a>';
                    {% endif %}

                    if(jQuery.inArray('{{ position.map_position }}', markers) == -1){
                        map.setCenter(results[0].geometry.location);
                        var marker = new google.maps.Marker({
                            map: map,
                            icon: '{{position.icon}}',
                            position: results[0].geometry.location
                        });
                        markers.push('{{ position.map_position }}');
                        var infowindow = new google.maps.InfoWindow({
                            content: content_html
                        });
                        infos.push(infowindow);
                        google.maps.event.addListener(marker, 'click', function() {
                            infowindow.open(map,marker);
                        });
                    }
                    else {
                        var infowindow = infos[jQuery.inArray('{{ position.map_position }}', markers)];
                        infowindow.setContent(infowindow.getContent()+'<hr>'+content_html);
                    }
                }
            });
        {% endfor %}
    });
</script>

I displayed positions in the map but if i had more than 2 markers i can open info bull of all of them. How can i open just one info bull at the same time ? (if i open one info bull, all others stay closed)

Answer 1

Instead of creating several infos as Array. Create a single infowindow in your initialization. In your event/listener where you want to open the infowindow , you'd set the content and open the infowindow on the marker/location on the map.

//Initialize infowinow
var infowindow = new google.maps.InfoWindow({
       content: ''
 });

function add_marker(point, name, content_html)
{
   var marker = new google.maps.Marker({
      map: map,
      position: point,
      dragable: false,
      clickable: true,
      name: name
   });
   marker.content_html = content_html;
   google.maps.event.addListener(marker, 'click', function()
   {
      infowindow.setContent(marker.content_html);
      infowindow.open(map, marker);
   });
   return marker;
};

Answer 2

I would like to share solution to help for the next consultation...I have just replaced this:

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

with this:

google.maps.event.addListener(marker, 'click', function() {
    // Add a loop for closing all infowindows and after it we open the merkered one
    for(var i=0; i < infos.length; i++){
        infos[i].close();
    }
    infowindow.open(map,marker);
});