css - Unable to get Google Maps API v3 to completely load on jQuery Mobile -

couldn't load google maps on jquery mobile. load, when hit refresh on browser. using jquery.mobile 1.3.1 , jquery 1.9.1. not sure how because learning this.

function initialize() {          //add map, type of map         var map = new google.maps.map(document.getelementbyid('outage_map'), {             zoom: 9,             center: new google.maps.latlng(37.7749295, -122.4194155),             disabledefaultui: true,             maptypeid: google.maps.maptypeid.terrain         });          var $map = $('#outage_map');         $map.height( $(window).height(200) - $map.offset().top );          //declare marker call 'i'         var marker, i;          //declare infowindow         var infowindow = new google.maps.infowindow({             maxwidth: 250,         });          //add locations         var locations = [             ['san francisco: power outage <br> reported: 9:00am <br> estimated restore time: 12:00pm', 37.789241, -122.41073, 'images/electric.png'],              ['san francisco: power outage <br> reported: 9:00am <br> estimated restore time: 12:00pm', 37.806992, -122.41051, 'images/electric.png'],              ['san francisco: gas interruption <br> reported: 9:30am <br> estimated restore time: 12:00am', 37.789241, -122.41073, 'images/gas.png'],              ['san francisco: planned maintenance <br> time: 9:00am 2:30pm ', 37.784748, -122.468982, 'images/maintenance.png'],              ['shingletown: power outage <br> reported: 9:00am <br> estimated restore time: 12:00pm', 40.4923784, -121.8891586, 'images/electric.png'],              ['san mateo: maintenance <br> time: 10:00am 12:00pm', 37.5629917, -122.3255254, 'images/maintenance.png'],              ['concord: power outage <br> reported: 11:10pm <br> estimated restore time: 4:00am', 37.9779776, -122.0310733, 'images/electric.png'],              ['hayward: power outage <br> reported: 11:10pm <br> estimated restore time: 4:00am', 37.6688205, -122.0807964, 'images/electric.png'],              ['alameda: maintenance <br> time: 9:00am 3:30pm', 37.7652065, -122.2416355, 'images/maintenance.png'],         ];          //add marker each locations         (i = 0; < locations.length; i++) {             marker = new google.maps.marker({                 position: new google.maps.latlng(locations[i][1], locations[i][2]),                 map: map,                 icon: locations[i][3]             });              //click function marker, pops infowindow             google.maps.event.addlistener(marker, 'click', (function(marker, i) {                 return function() {                     infowindow.setcontent(locations[i][0]);                     infowindow.open(map, marker);                 }             })(marker, i));         }     }     google.maps.event.adddomlistener(window, 'load', initialize); 

the map within container called "page"

<div class="page" data-role="page" id="map_main">   <!-- navagation -->   <div data-theme="a" data-role="header" data-position="fixed">       <a data-role="button" data-direction="reverse" data-transition="slide"       href="index copy.html" data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">           main       </a>       <h3>           outage map       </h3>   </div>   <!-- navagation -->    <!-- map -->   <div class="map_image" id="outage_map"></div>       <!-- map --> 

intro

to able show map on jqm page must show during pageshow event. because correct page height can calculated @ point. content div not cover whole available surface need fix manually. not error how jquery mobile works.

working example

working example: http://jsfiddle.net/gajotres/7kgde/

code

also function getrealcontentheight used set correct content height.

$(document).on('pageshow', '#index',function(e,data){        $('#map_canvas').css('height',getrealcontentheight());     // minimum zoom level we'll allow    var minzoomlevel = 12;     var map = new google.maps.map(document.getelementbyid('map_canvas'), {       zoom: minzoomlevel,       center: new google.maps.latlng(38.50, -90.50),       maptypeid: google.maps.maptypeid.roadmap    });     // bounds north america    var strictbounds = new google.maps.latlngbounds(      new google.maps.latlng(28.70, -127.50),       new google.maps.latlng(48.85, -55.90)    );     // listen dragend event    google.maps.event.addlistener(map, 'dragend', function() {      if (strictbounds.contains(map.getcenter())) return;       // we're out of bounds - move map within bounds       var c = map.getcenter(),          x = c.lng(),          y = c.lat(),          maxx = strictbounds.getnortheast().lng(),          maxy = strictbounds.getnortheast().lat(),          minx = strictbounds.getsouthwest().lng(),          miny = strictbounds.getsouthwest().lat();       if (x < minx) x = minx;      if (x > maxx) x = maxx;      if (y < miny) y = miny;      if (y > maxy) y = maxy;       map.setcenter(new google.maps.latlng(y, x));    });     // limit zoom level    google.maps.event.addlistener(map, 'zoom_changed', function() {      if (map.getzoom() < minzoomlevel) map.setzoom(minzoomlevel);    });    });  function getrealcontentheight() {     var header = $.mobile.activepage.find("div[data-role='header']:visible");     var footer = $.mobile.activepage.find("div[data-role='footer']:visible");     var content = $.mobile.activepage.find("div[data-role='content']:visible:visible");     var viewport_height = $(window).height();      var content_height = viewport_height - header.outerheight() - footer.outerheight();     if((content.outerheight() - header.outerheight() - footer.outerheight()) <= viewport_height) {         content_height -= (content.outerheight() - content.height());     }      return content_height; } 

edit

there's solution don't requires javascript , can done css. if want find out more take here. want @ last solution , example.