javascript - google maps infowindow.close() case in separate function

Question

I want to make infowindow-making process in the different function, cause it`s gonna contains much info.

I have a global-defined var infowindow = new google.maps.InfoWindow({});

when im trying to close it in the separate function, infowindow.close() method doesnt works. Can`t get, wat is wrong here? the infowindow object is successfully passed into the function, cause new infowindows creating successfully

Here is a full code

var locations = [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra Beach', -33.950198, 151.259302, 1]
];

var markers = [];

///////////
///markers initialization
///////////
function initialize() {
    var myLatlng = new google.maps.LatLng(-33.923036, 151.259052);
    var mapOptions = {
        zoom: 11,
        center: myLatlng
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);


    var num_markers = locations.length;

    //set infowindow global to prevent multiply opening
    var infowindow = new google.maps.InfoWindow({});
    for (var i = 0; i < num_markers; i++) {
        markers[i] = new google.maps.Marker({
            position: {lat:locations[i][1], lng:locations[i][2]},
            map: map,
            id: locations[i][3]
        });

        //here is a special stuff to pass iterator
        google.maps.event.addListener(markers[i], 'click', (function(i,infowindow, map) {
            return function() {
                MakeContent(i,infowindow, map);
            }
        })(i,infowindow, map));

    }
}

google.maps.event.addDomListener(window, 'load', initialize);


function MakeContent(i,infowindow, map){

    var contentString = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
        '<div id="bodyContent">'+
        '<p><b>Uluru Hop</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
        'sandstone rock formation in the southern part of the '+
        'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
        'south west of the nearest large town, Alice Springs; 450&#160;km '+
        '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
        'features of the Uluru - Kata Tjuta National Park. Uluru is '+
        'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
        'Aboriginal people of the area. It has many springs, waterholes, '+
        'rock caves and ancient paintings. Uluru is listed as a World '+
        'Heritage Site.</p>'+
        '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
        'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
        '(last visited June 22, 2009).</p>'+
        '</div>'+
        '</div>';

        infowindow.close();
        infowindow = new google.maps.InfoWindow({
           id: markers[i].id,
           content:contentString,
           position:new google.maps.LatLng(locations[i][1],locations[i][2])
        });
        infowindow.open(map, markers[i]);
}

Answer 1

The infowindow is local to the initialize function. Make it global (define it outside of any function). Probably simpler to reuse the existing infowindow than recreate it.

proof of concept jsfiddle

var locations = [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra Beach', -33.950198, 151.259302, 1]
];

var markers = [];
var infowindow = new google.maps.InfoWindow({});
///////////
///markers initialization
///////////
function initialize() {
    var myLatlng = new google.maps.LatLng(-33.923036, 151.259052);
    var mapOptions = {
        zoom: 11,
        center: myLatlng
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);


    var num_markers = locations.length;

    //set infowindow global to prevent multiply opening
    
    for (var i = 0; i < num_markers; i++) {
        markers[i] = new google.maps.Marker({
            position: {lat:locations[i][1], lng:locations[i][2]},
            map: map,
            id: locations[i][3]
        });

        //here is a special stuff to pass iterator
        google.maps.event.addListener(markers[i], 'click', (function(i,infowindow, map) {
            return function() {
                MakeContent(i, map);
            }
        })(i,infowindow, map));

    }
}

google.maps.event.addDomListener(window, 'load', initialize);


function MakeContent(i, map){

    var contentString = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
        '<div id="bodyContent">'+
        '<p><b>Uluru Hop</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
        'sandstone rock formation in the southern part of the '+
        'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
        'south west of the nearest large town, Alice Springs; 450&#160;km '+
        '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
        'features of the Uluru - Kata Tjuta National Park. Uluru is '+
        'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
        'Aboriginal people of the area. It has many springs, waterholes, '+
        'rock caves and ancient paintings. Uluru is listed as a World '+
        'Heritage Site.</p>'+
        '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
        'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
        '(last visited June 22, 2009).</p>'+
        '</div>'+
        '</div>';

        infowindow.close();
        infowindow.setMap(null);
        infowindow = new google.maps.InfoWindow({
           id: markers[i].id,
           content:contentString,
           position:new google.maps.LatLng(locations[i][1],locations[i][2])
        });
        infowindow.open(map, markers[i]);
}

html, body, #map-canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?ext=.js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>