jQuery Mobile and Google Maps

Question

I have a problem with jQuery Mobile and Google Maps. I have to create a mobile application with jQuery Mobile. My problem is that I can't display the map in the content, I see only grey space and browsers like Safari and Chrome can't see any type of errors or warnings. Firefox's console instead see a lot of warnings such as "unknown property "-moz-border-radius-topleft” Declaration Dropped.", "Error in parsing value for background-image. Declaration Dropped."

I loaded the code without jQueryMobile, like I did for a normal webpage, and it worked.

EDIT: What I can see, and to see what the console shows you can look here:

http://riccardocelli.altervista.org/temporaneo.php

I tried to change versions of jQuery and jQueryMobile but it doesn't work..

$(document).on("pagecreate", "#pagemap", function () {
//here the google map is created and loaded 
...
...
Options = {
            enableHighAccuracy: true,
            timeout: 10000,
            maximumAge: 0,
            zoom:20
        };

...
            map = new google.maps.Map(document.getElementById("map_container"), Options);
...

<div data-role="page" id="pagemap" data-title="home">

    <div data-role="header" data-position="fixed" data-tap-toggle="false">
    <div id="top">
        <a id="top1" href="index.php" data-role="button" data-icon="home" data-iconpos="notext">Home</a>
        <a id="top2" href="#search" data-role="button" data-icon="search" data-iconpos="notext">Search</a>
        </div>
    </div>

    <div role="main" class="ui-content" id="map_container">

    </div>

    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
        <div id="bottom">
            <a id="bottom1" href="#friends" data-role="button" data-icon="star" data-iconpos="notext">Home</a>
            <a id="bottom2" href="Settings.php" data-role="button" data-icon="gear" data-iconpos="notext">Search</a>
        </div>
    </div>
</div>

Anyone can help me? All the errors are in the file: http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css .

Thank you!

I tried to substitute "pagecreate" with "pageinit", "pageshow" but it doesn't work. I saw a lot of examples and demos but nothing of these worked in my mac. — Riccardo Celli, Sep 01 '16 at 09:17
Welcome to Stackoverflow! You always have an option to edit the question than adding details in comments section. Also, can you please provide us with a http://jsfiddle.net or http://jsbin.com example where it demonstrates the error that you're facing? Btw, did you check by setting a minimum height to the div `map_container` — Ravimallya, Sep 01 '16 at 09:22
Thank you @Ravimallya for your answer but the height don't change the result :( — Riccardo Celli, Sep 01 '16 at 09:48

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Try giving the google map a starting point:

var myOptions = {
  enableHighAccuracy: true,
  zoom: 6,
  center: new google.maps.LatLng(36.231719,-113.030911),
};
map = new google.maps.Map($('#map_container')[0], myOptions);

Also add a div within the jQM content div for your map container and set it's height.

DEMO

If you want the map to fill the available device height between header and footer, you can scale the content DIV according to this answer: set content height 100% jquery mobile

jQuery Mobile and Google Maps

1 Answers1

DEMO

DEMO2