Geek asks and answers

Closing InfoWindow - Closing onclick - Google Map

For all my life I can’t get only one info indicator, which will be displayed simultaneously in the V3 API. I need to close it before the next opening. Also, looking that the info window closes anywhere on the map. Is this part of the initialization function?

Here is my full script:

// defining vars
var map = null;
var markers = [];
var adUnit;
var center = new google.maps.LatLng(39.676502,-105.162101);

// function that soley initializes the new map object
function initialize() {

    var mapOptions = {
        zoom: 10,
        center: center,
            mapTypeControl: true,
            mapTypeControlOptions: {
              style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
            },
            zoomControl: true,
                    zoomControlOptions: {
                      style: google.maps.ZoomControlStyle.SMALL,
                      position: google.maps.ControlPosition.LEFT_BOTTOM
                    },
            panControl: false,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }
    map = new google.maps.Map($('#map_canvas')[0], mapOptions);
    // call the loader function
    loadXML();

    // Adsense Options                                 
    var adUnitDiv = document.createElement('div');
    var adUnitOptions = {
      format: google.maps.adsense.AdFormat.BUTTON,
      position: google.maps.ControlPosition.RIGHT_BOTTOM,
      publisherId: 'ca-google-maps_apidocs',
      map: map,
      visible: true
    };
    adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);     

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


} //<-- Initialize

// load (and map) the markers from XML data
function loadXML() {
    $.get('data.xml', function(data) {
        // var bounds = new google.maps.LatLngBounds();   //<--- Size map to bounds of markers LatLng
        $(data).find('marker').each(function() {

            var lat = $(this).attr('lat')
            var lng = $(this).attr('lng')
            var name = $(this).attr('name')
            var type = $(this).attr('type')

            var LatLng   = new google.maps.LatLng(parseFloat($(this).attr('lat')),
                                    parseFloat($(this).attr('lng')));

            var myToggleData = {                    //<---- collecting data to be toggled on/off
                type      : $(this).attr('type'),
                skill         : $(this).attr('skill'),
                eta_whatever_that_means : parseFloat($(this).attr('eta'))
            }        

            var marker      = new google.maps.Marker({
                position : LatLng,
                map         : map,
                icon     : 'images/marker.png',
                title     : $(this).attr('name'),
                data     : myToggleData
            });

              var html ='<div id="winBackground">          <div class="winTitle">' + name + '</div>          <div class="winHead">Type: <div class="winData">' + type + '</div></div>   </div>';


              // create the infoWindow
              var infoWindow = new google.maps.InfoWindow();
              // add a listener to open the infoWindow when a user clicks on one of the markers
              google.maps.event.addListener(marker, 'click', function() {
                infoWindow.setContent(html);
                infoWindow.open(map, marker);
              });

            markers.push(marker);
            // bounds.extend(LatLng);
        });


        // map.fitBounds(bounds);
    });
}
// The toggleMarker function
function toggleMarkers(attr,val) {
    if (markers){
        for (i in markers) {
            if(markers[i].data[attr] == val){
                var visibility = (markers[i].getVisible() == true) ? false : true;
                markers[i].setVisible(visibility);
            }
        }
    }
}
+3
source share
4 answers

Do not create a new InfoWindow for each token. Create only one InfoWindow, and then when you change it, do the following:

infowin.setContent("");
infowin.open(map, marker);
+6
source

This will close all info windows on the click of the map (without having to have a link to the infoWindow object).

google.maps.event.addListener( map, 'click', function() { 
    infowindow.open( null, null ); 
} );
+2
source 
   google.maps.event.addListener(marker, 'click', function() {
        if(!marker.open){
            infowindow.open(map,marker);
            marker.open = true;
        }
        else{
            infowindow.close();
            marker.open = false;
        }
        google.maps.event.addListener(map, 'click', function() {
            infowindow.close();
            marker.open = false;
        });
    });

Try it, it will work

+2
source

Try something like this:

if(popup) {
    popup.close();
}

popup = new google.maps.InfoWindow({
    content:'My New InfoWindow',
});

popup.open(map, marker);
0
source

More articles:


All Articles