Google Maps JS Api doesnt cover all div in Kendo UI Mobile app

Question

I am working on a Kendo UI Mobile project and in a view I need to work in google maps. I set the width and height of the map container div, but when I show the map, it does not cover all the div. Here is an image and the code I am working with.

html:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

Javascript:

function initialiceMap() {
var mapOptions = {
  center: {lat: 40.659806, lng: -77.541504},
  zoom: 11,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById('map'), mapOptions);

}

The map is drawn but it does not cover all the div.

I am using Cordova 3.5, Kendo UI Mobile.

Any idea?

Answer 1

This appears to be a duplicate of Google Maps v3 load partially on top left corner, resize event does not work.

This happens because a resize event / container element size change happens after the map is initialized. You could trigger a resize on the map google.maps.event.trigger(map, 'resize'); after your page loads.

So in KendoUI with tabs, something like this might do the trick:

...
map = new google.maps.Map(document.getElementById('map'), mapOptions);
yourTabStrip.bind("activate", onActivate);
function onActivate(ev) {
    google.maps.event.trigger(map, 'resize');
}

The activate triggers after the tab change and animation is complete, so this should be sufficient.