CODEWITHSUNDEEP
javascriptjquerygoogle-mapsjquery-mobilecordova
Gokul
Gokul

Reputation: 384

my geolocation for googlemap is not working

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)

Upvotes: 0

Views: 253

Answers (2)

Dr.Molle
Dr.Molle

Reputation: 117354

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>

Upvotes: 2

Ved
Ved

Reputation: 2701

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>

Upvotes: 0

Related Questions