Jquery code doesn't work in jQuery mobile project

Question

I'm developing an hybrid app with Cordova, using jQuery Mobile libraries. Since I need to show a map I used and edited the code found here but seems it doesn't recognize the first line of the code.

Geolocation.js

$(document).on("pagecreate", "#map-page", function() { //doesn't work
    alert('hello');

    function initMap() {
        var defaultLatLng = new google.maps.LatLng(44.494887, 11.342616300000032); //Bologna      
        drawMap(defaultLatLng);
    }

     function drawMap(latlng) {
         var myOptions = {
             zoom: 17,
             center: latlng,
         };

         var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

         var marker = new google.maps.Marker({
             position: latlng,
             map: map,
             title: "Parcheggio"
         });
    }
});

Html container is the same as the demo. The scripts I've included:

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/geolocation.js"></script>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD91dMkAWwADchy-WY1-5O7P6nHmjGont0
&callback=initMap"></script>

I've also tried to change API key but nothing changes. Do you know how to solve this problem?

You might try the approach in this answer, it provides some good information on where to place your initializing code in a Cordova app: http://stackoverflow.com/a/14109006/5633831 — Petko Bossakov, Dec 12 '15 at 19:30

Nikhil Aggarwal · Answer 1 · 2015-12-12T19:35:52.630

0

You should move the event bindings in document.ready block.

$(document).ready(function(){
    $(document).on("pagecreate", "#map-page", function() {
      ....
   });
});

Additionally, include Geolocation.js after jquery includes.

edited Dec 12 '15 at 19:35

answered Dec 12 '15 at 19:22

Nikhil Aggarwal

28,197
4
43
59

Thanks but still doesn't work. Looks like it doesn't read code starting with $(document) or just $. – Kwr93 Dec 12 '15 at 19:33
@MonicaKiur - You are including geolocation.js before jquery.js. Need to change the order. Please check now – Nikhil Aggarwal Dec 12 '15 at 19:35
I changed the order. Now it works but it's still not loading the map – Kwr93 Dec 12 '15 at 21:15
@MonicaKiur - Good to know about that. For that I request you to post another question. – Nikhil Aggarwal Dec 12 '15 at 21:18
1

Sure. Thank you very much for your help. – Kwr93 Dec 12 '15 at 21:20
@MonicaKiur - Happy to help you – Nikhil Aggarwal Dec 12 '15 at 21:21

Jquery code doesn't work in jQuery mobile project

1 Answers1