Google Map Infowindow not showing properly but when i open firbug so it's working well

Question

The infowindow is not showing properly on my map when clicking on a marker. The website is here.

You'll also notice the map control isn't properly displayed either.

var map;
var locations = <?php print json_encode(di_get_locations()); ?> ;
var markers = []
jQuery(function ($) {
    var options = {
        center: new google.maps.LatLng(51.840639771473, 5.8587418730469),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), options);

    for (var i = 0; i < locations.length; i++) {
        makeMarker(locations[i]);
    }
    centerMap();

});

function makeMarker(location) {
    var markerOptions = {
        map: map,
        position: new google.maps.LatLng(location.lat, location.lng)
    };
    var marker = new google.maps.Marker(markerOptions);
    markers.push(marker);
    var content = '';

    var infowindow = new google.maps.InfoWindow({
        content: "test",
        size: new google.maps.Size(50, 50),
        disableAutoPan: true
    });


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

function centerMap() {
    map.setCenter(markers[markers.length - 1].getPosition());
}

Answer 1

had solved this problem before. Google Map will not display properly when you load the map into a "display:none" canvas. Bootstrap modal win will be hidden in the beginning. So you have to make sure that map canvas can't be hidden before Google Map finished loading.

My work around is move the canvas to a positon which user can't see it and load map into it. After a few second (maybe 500ms), move map to the right position (in your case is modal body).

Javascipt:

$(function(){
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    setTimeout(function(){
        $('.modal-body').append($("#map").css("margin-top","0px").get(0));
    },500);
});

Answer 2

You should try to use only one instance of the infowindow object and use the setContent() method within your marker click event listener.

for (var i = 0; i < locations.length; i++) {

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        title: locations[i][0]
    });

    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));

    markers.push(marker);
}

For reference: JSFiddle demo