google maps in jquery mobile

Question

When showing a google map in jquery mobile it appears (after reading the forums) that code like the following is required:

<div data-role="page" data-theme="b" class="page-map" style="width:100%; height:100%;">
    <div data-role="header"><h1>Map Page</h1></div>
    <div data-role="content" style="width:100%; height:100%; padding:0;"> 
        <div id="map_canvas" style="width:100%; height:100%;"></div>
    </div>
</div>

Taking away the height on outside div causes the div to drop to height 0 and the map not being displayed. I was hoping to get some dynamic text below the map (based on the contents on the) which length I do not know so I can't set an absolute height. Has anyone got a workaround for this problem?

ifaour · Accepted Answer · 2012-12-12T14:09:05.100

15

This is not a Google maps related issue, the thing is, you need to SET a specific width and height for your Map canvas, your code could be rewritten like:

<div data-role="page" data-theme="b" class="page-map" style="width:100%; height:100%;">
    <div data-role="header"><h1>Map Page</h1></div>
    <div data-role="content" style="padding:0;">
        <div id="map_canvas" style="width:300px; height:300px;"></div>
      <p id="text">Lorem ipsum legere facilisi conclusionemque pro et, sint aperiam vel at. No postea scaevola vivendum duo, et vix erant paulo. Ex fuisset perfecto vix. No sit laudem noster scriptorem, probatus assueverit ius cu.</p>
    </div>
</div>

Example link

UPDATE: Have a look @Blowsie comment, you may also check the jquery-ui-map plugin.

edited Dec 12 '12 at 14:09

answered Jan 01 '11 at 15:46

ifaour

38,035
12
72
79

3

The problem here is that then there is no way to have the map fill the screen on all devices. – paullb Jan 02 '11 at 13:59
I'm no expert on mobile web development but I suppose there should be articles about detecting mobile screen size, like [this](http://www.ilovecolors.com.ar/detect-screen-size-css-style/) article? this way you can apply different styles depending on the device – ifaour Jan 02 '11 at 16:42
These days there are many many different sizes of screens of smart phones so making a CSS for each would mean i would have to test on each of those devices as well also making device specific CSS is hardly good practice. – paullb Jan 03 '11 at 12:34
4

You can make this map full screen easily by using a width:100%; height:100% and having the parent div as position:absolute;top:0;left:0; right:0; bottom:0; - this is pretty common practice for achieving full screen on any device, if this fails, its super simple to create a js solution – Blowsie Jul 11 '11 at 15:29
@Blowsie: Works like a charm. But since `position` is `absolute`, you need to add the `top:XXpx;` to account for the header. – Arjun Abhynav Jan 17 '13 at 14:43

score 12 · Answer 2 · edited May 29 '13 at 23:22

There is an official example for this here: http://view.jquerymobile.com/master/demos/examples/maps/geolocation.php

HTML:

<div data-role="page" class="page-map">
    <script src="map.js"></script>
    <link rel="stylesheet" href="map.css" />

    <div data-role="header"><h1>Map View</h1></div>
    <div data-role="content"> 
        <div id="map-canvas">

            <!-- map loads here... -->
        </div>
    </div>
</div>

CSS:

.page-map, .ui-content, #map-canvas { width: 100%; height: 100%; padding: 0; }

score 5 · Answer 3 · answered Oct 19 '11 at 13:18

Well here how I did it and it worked for me.

<div data-role="page" id="atm" data-theme="b">
<div data-role="header" data-theme="b" data-position="inline" class="classHeader"> 
        <a href="#home" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-left jqm-home">Options</a>
        <h1>Location</h1>
    </div>

    <div data-role="content" id="map_canvas"></div>

    <div data-role="footer" data-position="fixed" data-theme="b" class="classFooter">
        <h1>Copyright © 2011.</h1> 
    </div>

</div>

Then add these to your CSS File.

.classHeader{
height:10% !important;
}

.classFooter{
height:10% !important;
}

#map_canvas{
padding-top:10%;
padding-bottom:10%;
height:auto;
position:absolute;
width:100%;
height:88%;
max-height:1600px;
overflow:hidden;
display:block;
}

This is working perfectly for me.

dave1010 · Answer 4 · 2011-03-01T16:50:09.387

4

Quick and dirty fix that worked for me:

$('[data-role=content]')
  .height(
    $(window).height() - 
    (5 + $('[data-role=header]').last().height() 
    + $('[data-role=footer]').last().height())
  );
// tell google to resize the map
google.maps.event.trigger(map, 'resize');

edited Mar 01 '11 at 16:50

answered Feb 16 '11 at 17:02

dave1010

15,135
7
67
64

Can you add more context? where abouts in the page life cylce are you calling this? – Luke Mcneice Jun 04 '12 at 16:48
1

It's been a long time & I don't have the code anymore but I believe this was called on Google map's load event and also on orientation change. – dave1010 Jun 07 '12 at 12:11

google maps in jquery mobile

4 Answers4

Linked