AppBuilder Simulator User denied Geolocation

4 posts, 0 answers
  1. Imen
    Imen avatar
    8 posts
    Member since:
    Oct 2015

    Posted 01 Nov 2015 Link to this post

    I want to show a map in my view,but every time I click on the button map I get an alert that shows this message:

     

    <p>AppBuilder Simulator</p><p>User denied Geolocation​</p>

     

    then when I click on "OK" I get those lines in console:

    app.js online11
    app.js echec1

    this is my HTML code:

    <div id="storesContent">
     <div id="map"></div>
     </div>
     and the app.js:

    (function($, doc) {
     
        // store a reference to the application object that will be created
        // later on so that we can use it if need be
        var app,
        _mapElem,
        _mapObj,
        _storeListElem,
        _private,
        _appData = new AppData(),
        _isOnline = true;
     
        // create an object to store the models for each view
        window.APP = {
          models: {
            home: {
              title: 'Home'
            },
            settings: {
              title: 'Settings'
            },
            map: {
                title: 'Restaurants'
            },
            contacts: {
              title: 'Contacts',
              ds: new kendo.data.DataSource({
                data: [{ id: 1, name: 'Bob' }, { id: 2, name: 'Mary' }, { id: 3, name: 'John' }]
              }),
              alert: function(e) {
                alert(e.data.name);
              }
            }
          }
        };
     
        // this function is called by Cordova when the application is loaded by the device
        document.addEventListener('deviceready', function () { 
     
          navigator.splashscreen.hide();
     
          app = new kendo.mobile.Application(document.body, {
     
        //Private methods
        _private = {
            getLocation: function(options) {
                var dfd = new $.Deferred();
     
                //Default value for options
                if (options === undefined) {
                    options = {enableHighAccuracy: true};
                }
     
                navigator.geolocation.getCurrentPosition(
                    function(position) {
                        dfd.resolve(position);
                    },
                    function(error) {
                        dfd.reject(error);
                    },
                    options);
     
                return dfd.promise();
            },
     
            initMap: function(position) {
                //Delcare function variables
                var myOptions,
                    mapObj = _mapObj,
                    mapElem = _mapElem,
                    pin,
                    locations = [],
                    latlng;
     
                _mapElem = mapElem; //Cache DOM element
     
                // Use Google API to get the location data for the current coordinates
                latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
     
                myOptions = {
                    zoom: 11,
                    center: latlng,
                    mapTypeControl: false,
                    navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
     
                mapObj = new google.maps.Map(mapElem, myOptions);
                _mapObj = mapObj; //Cache at app level
     
                pin = [
                    {
                        position: latlng,
                        title: "Your Location"
                    }
                ];
     
                _private.addMarkers(pin, mapObj);
     
                // Get stores nearby
                _appData.getStarbucksLocations(position.coords.latitude, position.coords.longitude)
                .done(function(result) {
                    var len = result.length,
                        pinImage = new google.maps.MarkerImage(
                                        "styles/images/cofeeCup-sprite.png",
                                        new google.maps.Size(49, 49),
                                        new google.maps.Point(0, 202));
     
     
                    for (var i = 0; i < len; i++) {
                        locations.push({
                            title: result[i].title + ", " + result[i].description,
                            position: new google.maps.LatLng(result[i].latitude, result[i].longitude),
                            icon: pinImage,
                            animation: google.maps.Animation.DROP
                        });
                    }
     
                    _private.addMarkers(locations, mapObj);
                })
                .fail(function(e, r, t) {
                    alert("Error loading locations.");
                });
            },
     
            addMarkers: function(locations, mapObj) {
                var marker,
                    currentMarkerIndex = 0;
     
     
                function createMarker(index) {
                    if (index < locations.length) {
                        var tmpLocation = locations[index];
     
                        marker = new google.maps.Marker({
                            position:tmpLocation.position,
                            map:mapObj,
                            title:tmpLocation.title,
                            icon: tmpLocation.icon,
                            shadow: tmpLocation.shadow,
                            animation: tmpLocation.animation
                        });
                        oneMarkerAtTime();
                    }
                }
     
                function oneMarkerAtTime() {
                    google.maps.event.addListener(marker, "animation_changed", function() {
                        if (marker.getAnimation() === null) {
                            createMarker(currentMarkerIndex+=1);
                        }
                    });
                }              
     
                createMarker(0);
            },
     
            initStoreList: function(position) {
                _appData.getStarbucksLocations(position.coords.latitude, position.coords.longitude)
                        .done(function(data) {
                            storesListViewModel.load(data);
                        })
                        .fail(function(e, r, t) {
                            alert("Loading error");   
                        });
            },
     
            toggleStoreView: function(index) {
                var isMap = (index === 0);
     
                if (isMap) {
                    $(_storeListElem).hide();
                    $(_mapElem).show();
                } else {
                    $(_storeListElem).show();
                    $(_mapElem).hide();
                }
            }
        };
     
            storesInit: function() {
                _mapElem = document.getElementById("map");
                _storeListElem = document.getElementById("storeList");
     
                $("#btnStoreViewToggle").data("kendoMobileButtonGroup")
                .bind("select", function(e) {
                    _private.toggleStoreView(e.sender.selectedIndex);
                });
            },
     
            storesShow: function() {
                //Don't attempt to reload map/sb data if offline
                //console.log("ONLINE", _isOnline);
                if (_isOnline === false) {             
                    alert("Please reconnect to the Internet to load locations.");
                    console.log("online");
                    return;
                }
     
                _private.getLocation()
                .done(function(position) {
                    _private.initStoreList(position);
                    _private.initMap(position);
                })
                .fail(function(error) {
                    alert(error.message); /*TODO: Better handling*/
                });
     
                if (_isOnline === true) {
                    $("#storesContent").show();
                    console.log("online11");
                    $("#offline").hide();
                    console.log("echec1");
                    google.maps.event.trigger(map, "resize");
                }
                else {
                    $("#storesContent").hide();
                    console.log("echec2");
                    $("#offline").show();
                }
            }
        };
     
        _app.init();
     
        $.extend(window, {
            cardsViewModel: _app.cardsViewModel,
            rewardCardShow: _app.rewardCardShow,
            rewardCardInit: _app.rewardCardInit,
            singleCardShow: _app.singleCardShow,
            singleCardInit: _app.singleCardInit,
            onAddCardViewShow: _app.onAddCardViewShow,
            announcementData: _app.announcementData,
            onStoresShow: _app.storesShow,
            storesInit: _app.storesInit
        });
    }(jQuery, document));

    I tried to follow the "Sample-Jiterzcoffeehouse" AppBuilder sample,and I have added this line into my index.html:

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

    have you please any idea about the problem,thanks a lot for help
  2. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 05 Nov 2015 Link to this post

    Hi Imen,

    I tried reproducing this behavior in the Jitterz Coffeehouse sample app but couldn't get it to show the same error message. Do you reproduce the problem with the sample app?

    Also, what AppBuilder client are you using? I tested the in-browser client and the Visual Studio extension. There were issues with geolocation in the past but they have all been addressed. So, we will need to reproduce the problem to be able to determine if it is an issue in AppBuilder.

    If the issue is only reproduced in your app, please consider opening a support ticket and sending us your project, so we can debug it and see what is wrong.


    Regards,
    Tsvetina
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  3. Imen
    Imen avatar
    8 posts
    Member since:
    Oct 2015

    Posted 05 Nov 2015 in reply to Tsvetina Link to this post

    Hi Tsvetina and thanks for your reply

    I have used the Jitterz Coffeehouse sample app in my application,to show the localisation of restaurants in the map,it works fine with this sample but not in my application(I have used the same principle)

    I work with kendo ui mobile ,the visual studio extension,and when I test the project with the chrome navigator,the map doesn't show but the information of the localtion has been shown

     

    thanks for help :)

  4. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 10 Nov 2015 Link to this post

    Hello Imen,

    Since the issue cannot be replicated in the sample app, we cannot suggest a solution without examining your code. If you're still getting the "User denied geolocation" message, you can open the Network tab in the simulator and examine the geolocation requests for any issues.

    If you can't find the cause for the error by debugging the app in the device simulator, I would also recommend that you open a support ticket and attach your project there. We can then try to replicate the error and advise you how to get over it.

    Regards,
    Tina Stancheva
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top