CODEWITHSUNDEEP
javascripthtmlgoogle-maps
BeniaminoBaggins
BeniaminoBaggins

Reputation: 12463

Google Map on Bootstrap Modal is grey - resizing the window makes it appear

I run this function after the page has loaded but no map displayed, just a grey square with the google logo and terms of use button at the bottom:

initMap() {
    var area = new google.maps.LatLngBounds(
        new google.maps.LatLng(-47.746617, 165.346753),
        new google.maps.LatLng(-33.670946, -179.667808)
    );


    var options = {
        bounds: area,
    zoom: 13
    };
    //this.autocomplete = new google.maps.places.Autocomplete(<HTMLInputElement>this.areaInput.areaInput.nativeElement, options);



       var  map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: -33.8688, lng: 151.2195 },
    zoom: 13
});
google.maps.event.trigger(map, "resize");

}

html:

<div id="map"></div>

css:

#map {
        height: 300px;
        overflow: visible;
        width:100%
    }

    #map * {
        overflow: visible;
    }

Why is the map just a grey square?

EDIT - When I resize the window, the map appears. Why is this?

How do I make it appear without needing to resize the window?

The map is on a bootstrap modal. The user has to click something to make the modal appear. The map appears but is grey with no actual map until resizing the window manually with the mouse.

EDIT: it is to do with timing. If i hook a button up to resize the map it works when clicking the button.

Upvotes: 0

Views: 1959

Answers (3)

alaa_sayegh
alaa_sayegh

Reputation: 2211

maybe somebody can benefit from this answer after almost one year :). i had the same problem and i solved it like this: in the initMap function, i triggered the resize

    function initMap() {
    var myCenter = new google.maps.LatLng(20.296100, 85.824500);
    var mapProp = { center: myCenter, zoom: 12, scrollwheel: false, draggable: true, mapTypeId: google.maps.MapTypeId.ROADMAP };
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    var marker = new google.maps.Marker({ position: myCenter });
    marker.setMap(map);

    $('a[href="#apartmentInfo"]').on('shown.bs.tab', function (e) {
        google.maps.event.trigger(map, 'resize');
        map.setCenter(mapProp.center);
    });
};

Upvotes: 2

BeniaminoBaggins
BeniaminoBaggins

Reputation: 12463

Ended up being because it was on a bootstrap modal. Needed to hook into the bootstrap modal lifecycle event "shown" to make sure it was fully loaded. Wasn't expecting the modal to be a factor because I've done it on a modal in the past without the issue. 

$('#result-details-modal').on('shown.bs.modal', (e) => {
    this.resizeMap();
})

resizeMap() {
    var map = new google.maps.Map(document.getElementById('map'), this.options);
    google.maps.event.trigger(map, "resize");
}

Upvotes: 0

ScaisEdge
ScaisEdge

Reputation: 133380

You have an error in the div (#map) and you should set a proper size for you div 

 <div id="map" style='width: 400px; height: 400px;'></div>

You have missed a ;

#map {
    height: 300px;
    overflow: visible;
    width:100%;    /*   here */
}

#map * {
    overflow: visible;
}

Upvotes: 2

Related Questions