jquery mobile with google maps has no height

Question

I am trying to incorporate google maps into a simple jquery mobile application. I am able to create the map using the pageinit event in jqm. The html gets appended to my container div like it should but the height turns out to be 0. I would like the map to be 100% of the area of the screen.

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">    </script>

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

<div data-role="page" id="indexPage" data-add-back-btn="true">

<div data-role="header">
    <a href='#' class='ui-btn-left ui-btn-back' data-icon='arrow-l'>Back</a>
    <h1>Page Title</h1>
    <a href="index.html" data-icon="gear" class="ui-btn-right">Refine</a>
</div>


    <div id="map_canvas" style="width:100%;height:100%;"></div> 


<div data-role="footer" data-position="fixed">
    <h4>Page Footer</h4>
</div>
</div>

<script>
$( '#indexPage' ).live( 'pageinit',function(event){
    var myOptions = {
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var mapElement = $("#map_canvas");      

    var map = new google.maps.Map(mapElement[0], myOptions);
});
</script>

</body>
</html>

possible duplicate of [google maps in jquery mobile](http://stackoverflow.com/questions/4574097/google-maps-in-jquery-mobile) — Andrew Leach, May 30 '12 at 21:36

score 3 · Answer 1 · answered May 30 '12 at 19:43

I propose you to add a function to calculate it in your tag when the page loads:

<script  type="text/javascript">
$(document).delegate('#indexPage', 'pageshow', function () {
    var height = ($(window).height() - $("#indexPage").find('[data-role="header"]').outerHeight() - $("#indexPage").find('[data-role="footer"]').outerHeight());
    $("#map_canvas").height(height);
});
</script>

Anderson · Answer 2 · 2013-08-16T09:05:58.817

Calculate and set it like: $("#map_canvas").height(screen.height);

OR

Make sure every ancestral DOM parent of #map_canvas has set a height, because height:100% means 100% of it's parent.

css sample for JQM 1.3:

#page-id,
#page-id .ui-panel-content-wrap,    
#page-id #content-id,
#map-canvas{
  width: 100%;
  height: 100%;      
}

css sample for JQM 1.4 alpha2:

#page-id,
#page-id #content-id,
#page-id .ui-panel-wrapper,
#map-canvas{
  width: 100%;
  height: 100%;      
}

score 0 · Answer 3 · answered May 09 '13 at 22:25

0

Its very simple - just add this css

<style>
    #indexPage {
        height: 0;
    }

    #map_canvas {
        height: 100%;
        padding: 0;
        text-shadow: none;
    }
</style>

answered May 09 '13 at 22:25

Omer Yair

86
1
2

jquery mobile with google maps has no height

3 Answers3