jQuery Mobile interferes with Google Maps v3 API

Question

I'm building an app within Phonegap and I've got two parts working on their own, but will not work together.

Here is the HTML I'm trying to render:

<body>
    <div id="map"></div>

    <div data-role="collapsible-set" id="storeList"> 

        <div data-role="collapsible" data-mini="true">
        <h3>Section 1</h3>
        <p>I'm the collapsible set content for section 1.</p>
        </div>

        <div data-role="collapsible" data-mini="true">
        <h3>Section 2</h3>
        <p>I'm the collapsible set content for section 2.</p>
        </div>

    </div>
</body>

When my header is in this order, the map shows up, but the jQuery mobile collapsing dropdown does not. This is probably stemming from trying to load jQuery Mobile before jQuery itself.

<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places"> </script>
    <title>Working Google Maps</title>
</head>

However, when I flip it around and place jQuery before jQuery mobile, then the collapsible data sets work, but google Maps does not show up. It's just a blank white space.

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places"> </script>

The CSS that matters:

html, body {
width: 100%;
height: 100%;
padding-top: 10%;
}

#map {
width: 100%;
height: 60%;
z-index: 5
}

#storeList {
height: 30%;
width: 100%;
position: absolute; 
bottom: 0; 
left: 0;
z-index: 2
}

The lengthy JavaScript

var app = {
// Application Constructor
initialize: function() {
    this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
   // app.receivedEvent('deviceready');
   navigator.geolocation.getCurrentPosition(app.onSuccess, app.onError);
},

onSuccess: function(position){
    var longitude = position.coords.longitude;
    var latitude = position.coords.latitude;
    var latLong = new google.maps.LatLng(latitude, longitude);

    var mapOptions = {
        center: latLong,
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map"), mapOptions);

    var myLocationMarkerImage = {
        url: 'img/blue_dot.png',
        anchor: new google.maps.Point(16, 0)
    };

    var myLocationMarker = new google.maps.Marker({
          position: latLong,
          map: map,
          title: 'my location',
          icon: myLocationMarkerImage
      });
},

onError: function(error){
    alert("the code is " + error.code + ". \n" + "message: " + error.message);
},

};

app.initialize();

TIA!

JQM isn't interfering, you're initializing Google map before JQM is initialized. You should instead initialize Google map after that, by listening to jQM's events. If you run Google map code inside `pagecreate` event or `pagecontainershow`, it will work. http://stackoverflow.com/a/22001257/1771795 — Omar, Nov 04 '14 at 22:29
Btw, just for your information. [phonegap-googlemaps-plugin](https://github.com/wf9a5m75/phonegap-googlemaps-plugin) is better performance than Google Maps JS API v3. Of course, the plugin works with JQueryMobile. Check it out. — wf9a5m75, Nov 05 '14 at 01:15
@wf9a5m75 i need to use the Places Library and there were more examples using the javascript API. Once I figure out how to mesh the two, i'll work on migrating it later on — Kenny Coleman, Nov 05 '14 at 09:04
Sounds good, @KennyColeman. Yeah, I have a plan to implement places API also, but I don't have enough time to development it. In the meanwhile, the people who want to use Places API with phonegap-googlemaps-plugin, they use both Google Maps JS API and the map plugin. — wf9a5m75, Nov 05 '14 at 17:18
@Omar I ended up never getting this to work and ended up scraping jQueryMobile and getting it to work with plain old javascript. I was never able to figure out how to get the map to load on pagecreate. $(document).on("pagecreate", function () {}; — Kenny Coleman, Nov 10 '14 at 13:57
I'm not experienced with cordova and the way it works, and I don't recall such a problem on SO. Does `pagecreate` event fire? Or any Jqm events? Also, I forgot to mention that you aren't wrapping your map and other elements in page div. wrap them in page div and give it an ID; delegate pagecreate event to that ID. — Omar, Nov 10 '14 at 14:12
@Omar after needing to use jQuery Mobile i came back to try and conquer this. After reading here http://stackoverflow.com/questions/16038562/phonegap-jquery-mobile-google-maps-v3-map-shows-top-left-tiles and http://demos.jquerymobile.com/1.4.0/map-geolocation/#&ui-state=dialog I was able to figure it out . thanks for pushing me in the right direction — Kenny Coleman, Nov 16 '14 at 20:38

score 1 · Answer 1 · edited May 23 '17 at 11:58

I was able to figure this out by looking at these two articles:

HTML

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link href='http://fonts.googleapis.com/css?family=Lobster|Quattrocento+Sans:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
</head>
<body>
    <div data-role="page" id="map-page" data-url="map-page">
        <div data-role="header" data-theme="a">
            <h1>My App</h1>
        </div>

        <div role="main" class="ui-content" id="map">
            <!-- map loads here... -->
        </div>

        <div id="storeListLoading"><img src="img/loader.gif"></div>
        <dl id="storeList"></dl>
    </div>
</body>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/async.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/jquery.scrollintoview.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=_MY_API_KEY_&libraries=geometry,places"> </script>
</html>

CSS

#map-page { 
width: 100%; 
height: 100%; 
padding: 0; 
}

#map {
width: 100%;
height: 45%;
z-index: 10;
position: fixed;
}

JS

var app = {
// Application Constructor
initialize: function() {
    this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
   // app.receivedEvent('deviceready');
        navigator.geolocation.getCurrentPosition(app.onSuccess, app.onError);
},

onSuccess: function(position){
    var longitude = position.coords.longitude;
    var latitude = position.coords.latitude;
    var latLong = new google.maps.LatLng(latitude, longitude);

    var mapOptions = {
        center: latLong,
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true
    };

    var map = new google.maps.Map(document.getElementById("map"), mapOptions);

    var myLocationMarkerImage = {
        url: 'img/blue_dot.png',
        anchor: new google.maps.Point(16, 0)
    };

    var myLocationMarker = new google.maps.Marker({
          position: latLong,
          map: map,
          title: 'my location',
          icon: myLocationMarkerImage
      });
 },

onError: function(error){
    alert("the code is " + error.code + ". \n" + "message: " + error.message);
},

};

$( document ).on( "pageshow", "#map-page", function() {
app.initialize();
});

jQuery Mobile interferes with Google Maps v3 API

1 Answers1