0

I am trying to develop a hybrid application using jQuery mobile and phonegap , I want to implement a googlemap with geolocation support .for that I have done some coding but while running the app it is just giving me an ajax loader and it is not stopping, Can anybody help me to find the error .. I have tried some jQuery mobile demos but none of them worked properly . giving my code below

<!doctype html>
<html lang="en">
   <head>
        <title> Google maps </title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
       <style>
#content {
    padding: 0;
    position : absolute; 
    top : 0;  
    right : 0; 
    bottom : 0;  
    left : 0;     
}
</style>
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=true&language=en"> </script>
        <script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.min.js"></script>

<script type="text/javascript">

            var mumbai = new google.maps.LatLng(19.075984,72.877656),
                mobileDemo = { 'center': '19.075984,72.877656', 'zoom': 15 },
                cityList = [
                    ['Bank ATM CST Road', 19.075984,72.877656, 1],
                    ['Bank ATM Air India Road', 19.078318,72.877024, 2],
               ['Bank ATM Lal Bahadur Sasthri Road', 19.069236,72.875278, 3]
                             ];

            function initialize()
            {
                $('#map_canvas').gmap({ 'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':false });
             //addMarkers();
      getcurrentposition();
            }

            function addMarkers()
            {
                for (var i = 0; i < cityList.length; i++) 
                {
                    var $marker = $('#map_canvas').gmap('addMarker', {id: i, 'position': new google.maps.LatLng(cityList[i][1], cityList[i][2],cityList[i][3]),title: cityList[i][0]});
                    $marker.click(function() {
                        $('#map_canvas').gmap('openInfoWindow', {'content': cityList[this.id][0]}, this);
                    });
                }
            }

            $(document).on("pageinit", "#basic-map", function() {
                initialize();
            });

            /* $(document).on('click', '.add-markers', function(e) {
                e.preventDefault();
                addMarkers();
            }); */

            function getcurrentposition()
            {
                $('#map_canvas').gmap('getCurrentPosition', function(position, status) {
                    if ( status === 'OK' ) {
                        var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                        $('#map_canvas').gmap('addMarker', {'position': clientPosition, 'bounds': true});
                        $('#map_canvas').gmap('addShape', 'Circle', { 
                            'strokeWeight': 0, 
                            'fillColor': "#008595", 
                            'fillOpacity': 0.25, 
                            'center': clientPosition, 
                            'radius': 15, 
                            'clickable': false 
                        });
                    }
                });

            }
        </script>
    </head>
    <body>
        <div id="basic-map" data-role="page">

            <div data-role="content">   
                <div class="ui-bar-c ui-corner-all ui-shadow" >
                    <div id="map_canvas" style="height:500px"></div>
                </div>

            </div>
        </div>      
    </body>
</html>

Logcat

04-04 04:53:07.952: D/CordovaLog(1665): Uncaught TypeError: Cannot call method 'apply' of undefined
04-04 04:53:07.952: I/chromium(1665): [INFO:CONSOLE(1)] "Uncaught TypeError: Cannot call method 'apply' of undefined", source: file:///android_asset/www/my_current_location.html (1)
04-04 04:53:08.182: D/Cordova(1665): onPageFinished(file:///android_asset/www/my_current_location.html)
04-04 04:53:08.182: D/Cordova(1665): Trying to fire onNativeReady
04-04 04:53:08.202: D/DroidGap(1665): onMessage(onNativeReady,null)
04-04 04:53:08.202: D/DroidGap(1665): onMessage(onPageFinished,file:///android_asset/www/my_current_location.html)
5
  • Have you checked the javascript console? Any errors?
    – davids
    Apr 4, 2014 at 9:31
  • I have checked my logcat ...I am developing in Eclipse ..see the edits
    – Gokul
    Apr 4, 2014 at 9:35
  • That message Uncaught TypeError: Cannot call method 'apply' of undefined is comming after your function getcurrentposition() is started. So Dr.Molle is right. Apr 4, 2014 at 9:41
  • I have added that method in js ..now that uncaught type error has gone but nothing to display
    – Gokul
    Apr 4, 2014 at 10:01
  • Add this js file<script type="text/javascript" src="jquery-ui-map.googlecode.com/svn/trunk/ui/…>
    – Ved
    Apr 4, 2014 at 11:12

2 Answers 2

2

jquery.ui.map doesn't have a method getCurrentPosition , you must implement it on your own.

See http://code.google.com/p/jquery-ui-map/wiki/Examples#Example_get_user_position for an example


<edit>

The linked example seems to be wrong, at least it's wrong for this version of jquery.ui.map

Use:

( function($) {

    $.extend($.ui.gmap.prototype, {

            /**
             * Gets the current position
             * @a: function(status, position)
             * @b:object, see https://developer.mozilla.org/en/XPCOM_Interface_Reference/nsIDOMGeoPositionOptions
             */
            getCurrentPosition: function(callback, geoPositionOptions) {
        if ( navigator.geolocation ) {
            navigator.geolocation.getCurrentPosition ( 
                function(result) {
                    callback(result, 'OK');
                }, 
                function(error) {
                    callback(null, error);
                }, 
                geoPositionOptions 
            );  
        } else {
            callback(null, 'NOT_SUPPORTED');
        }
    }

    });

  } (jQuery) );

But you also may load the existing jquery.ui.map.extensions.js as suggested by Ved

Additionally: You must also include http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.overlays.js , this will implement the addShape-method

Demo: http://jsfiddle.net/doktormolle/rd4Xt/ </edit>

1
  • I have tried the code in the link ..I have created the method jquery.ui.map.extensions.js and jquery.ui.map.extensions.min.js..but now no ajax loader and nothing to display
    – Gokul
    Apr 4, 2014 at 9:53
0

Add this javascript file also..

<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.extensions.js"></script>
4
  • I have added that..but nothing happened.
    – Gokul
    Apr 4, 2014 at 11:23
  • what nothing happened ?
    – Ved
    Apr 4, 2014 at 11:24
  • I am trying in my device Nexus 7 tab..I am getting other mapviews the problem is with geolocation ..when I added geolocation codes I am just getting a frame
    – Gokul
    Apr 7, 2014 at 4:12
  • It is now working ..thanks for the assistance Ved ..have a great day :)
    – Gokul
    Apr 7, 2014 at 7:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.