CODEWITHSUNDEEP
androidcssgoogle-mapsjquery-mobile
Atish Kumar Dipongkor
Atish Kumar Dipongkor

Reputation: 10422

Why Map is not showing in Mobile device?

I am using jquery mobile My Page

<div data-role="page" id="mapView" data-transition="slide">
        <div data-role="header" data-theme="d" data-position="fixed">
            <h1>
                <a href="" data-theme="b" data-role="button" data-mini="true" onclick="showDirection()">Get Direction</a></h1>
        </div>
         <p id="atmBoothDetails" >
            </p>
        <div data-role="content" id="mapViewContent">


            <div id="map-canvas">
            </div>
        </div>

css 

#map-canvas
    {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;

    }

Why Map is not showing in Mobile device??

Upvotes: 0

Views: 762

Answers (2)

Alkis Kalogeris
Alkis Kalogeris

Reputation: 17745

That's because the page will take as little place as possible. You are using 100% for width and height, but the container of the page doesn't have an actual height. You will have to do that programmatically. Check $(window).height(); to take the actual height of your viewport and change the #map-canvas height. You will have to do some tweaks for any header and footer you might have.

Upvotes: 0

Gajotres
Gajotres

Reputation: 57309

Description

This is not enough. Your #map-cnvas <div> will cover only full size of content div. Unfortunately content div (data-role="content") will never cover full available height left by header and footer.

That's why you need to manually resize content div height.

Solution 1

CSS:

#content {
    padding: 0;
    position : absolute !important; 
    top : 40px !important;  
    right : 0; 
    bottom : 40px !important;  
    left : 0 !important;     
}

Working jsFiddle example can be found here: http://jsfiddle.net/Gajotres/7kGdE/

Replace top and bottom with 0 if you don't have herader and footer.

Solution 2

Javascript

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;
}

This is a javascript solution.

And here’s also a working jsFiddle example: http://jsfiddle.net/Gajotres/xbr2v/

Final notes

If you want to find more information about this problem take a look at this article, you will also find several working examples.

Upvotes: 3

Related Questions