google maps not displayed correctly unless refreshing

Question

I am using JQuery mobile with the Google Map API. The map is not displayed properly unless I refresh the page and I don\'t understand why.

here is my map.html file:<

Answer 1

Just for completeness: The action of drawing the map should be performed after the page loads, that is when the page has actual values for width and height and you can initialize it as follows:

var map; //declared as global so you can access the map object and add markers dynamically 
$("#canvas-map").on( "pageshow", function() {
    var mapProp = {
            center:new google.maps.LatLng(53.6721226, -10.547924),
            zoom:13,
            mapTypeId:google.maps.MapTypeId.ROADMAP
          };
    map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
});

No refresh needed