CODEWITHSUNDEEP
javascriptjquerygoogle-mapsjquery-mobilecordova
Kenny Coleman
Kenny Coleman

Reputation: 186

jQuery Mobile interferes with Google Maps v3 API

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!

Upvotes: 0

Views: 1142

Answers (1)

Kenny Coleman
Kenny Coleman

Reputation: 186

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

Upvotes: 1

Related Questions