谷歌地图Infowindow没有正确显示，但当我打开冷杉时，它运作良好

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);
});