google map on jquery wizard can not load properly

Question

I want to make google map on wizard form, but the map cannot load properly and only show a half. I tried with resizing but the map still can't show fully. Thanks

<div class="row">
    <div class="col-sm-6">
        <div id="gmaps" style="width: 100%; height: 417px;"></div>
    </div>
</div>

I used bootstrap responsive.

    $(function ()
{
    $("#wizard").steps({
        headerTag: "h2",
        bodyTag: "section",
        transitionEffect: "slideLeft"
    });
});


var map;
function initialize() {
   var mapOptions = {
   zoom: 8,
   center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('gmaps'),
  mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", resizingMap());
$('#wizard').on('changed.fu.wizard', function(){
    resizeMap();
});
function resizeMap(){
    if(typeof map == "undefined") return;
    setTimeout(function(){resizingMap();} , 400);
}
function resizingMap(){
    if(typeof map == "undefined") return;
    var center = map.getCenter();
    google.maps.event.trigger(map,"resize");
    map.setCenter(center);
}

What is the 100% width of? Is there a containing div? If not you need CSS to specify body and html `body,html {width:100%;}` — geocodezip, Jan 19 '15 at 14:26
What is the 100% of? Unless you define it specifically 100% of 0 is 0. — geocodezip, Jan 20 '15 at 02:22

score 0 · Answer 1 · edited May 23 '17 at 11:56

I think, map use the pixel value of the container and % does not work in some cases/browsers.

I did something in the past like this:

when the map is loaded completely, update the size of your container, using the parent size maybe.

google.maps.event.addListenerOnce(map, 'idle', function(){
    // do something only the first time the map is loaded
});

Read this for more information: How can I check whether Google Maps is fully loaded?

google map on jquery wizard can not load properly

1 Answers1