Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • gary 385 posts 915 karma points
    Apr 07, 2013 @ 14:29
    gary
    0

    Mobile Directions Problem

    Hi

    Have extended the data-type to give directions, works faultlessly on desktop, or or a mobile browser ie Safari as iPad on desktop, but just will not call the "user accept" on any mobile device.

    Using navigator.geolocation.getCurrentPosition()

    as I understand , this should fire the request, but it isnt on any mobile device.

    Has anyone achieved this?

    Willing to share the code I have with anyone if it helps, my knowledge of Javascript is minimal.

    Hope someone can help, really holding up my project.

    Regards

    Gary

     

     

     

     

  • gavstorey 4 posts 24 karma points
    Apr 07, 2013 @ 17:21
    gavstorey
    0

    Not sure how you are using getCurrentPosition()  but you have to deal with quite a few scenarios

    1. getting a persons location

    2. browser not having geolocation capabilities

    3. the user disallowing you to have their location

    4. the user not seeing the popup in the browser

    I have added some code below that I have used before that deals with the above and also includes a fallback to get a rough location of the user based on http://hostip.info and jquery. 

     

    <script type="text/javascript" charset="utf-8">
    var findMe = function(){
        var timeoutId = 0;
    
        //handles receiving latitude/longitude and whether or not a user does not approve
        function locationHandler(location) {
            if (location!=null&&location.coords!=null){
                found(location.coords.latitude, location.coords.longitude);
            }else{
                lost();
            }
        };
    
        //what to do if a user can not be found
        function lost() {
            $.getJSON('http://api.hostip.info/get_json.php?position=true',function(data){
                found(data.lat,data.ln);
            });
        };
    
        //what to do if a user is found
        function found(lat,lng) {
            clearTimeout(timeoutId);
            alert("Found location lat=" +lat + ", lng=" + lng);
        };
    
        //has browser got geolocation capabilities?
        if (navigator&&navigator.geolocation){
            //set an action if the user doesn't approve
            timeoutId = setTimeout(lost,15000);
            //found them
            navigator.geolocation.getCurrentPosition(locationHandler,lost);
        }else{
            //can't find them
            lost();
        }
    };
    findMe();
    </script>

     

     

  • gary 385 posts 915 karma points
    Apr 07, 2013 @ 17:37
    gary
    0

    Hi Gav

    Many thanks, will have a go with that a bit later.

    Have tried every way I have found latest is  

              navigator.geolocation.getCurrentPosition(locSuccess, locError, { maximumAge: 500000, enableHighAccuracy: false, timeout: 6000 });

    tried both true and false for HighAccuracy, doesn't seem to make any difference.

    If I give the scenario, on desktop, it always alerts the pop-up to allow - but on mobile nothing happens, just a blank map page, but I have also checked other pages (demos) that work perfectly on desktop, but on mobiles, (tried iPad, iPhone, new Android phone), it just spins, or is checking for location. Would just like to see that pop-up to allow consent from user before I go any further.

    I live in The Algarve, could it be an issue of not being available via mobile devices? Would seem odd if that was the case.

    Thanks again for your help

    Gary

     

     

  • gary 385 posts 915 karma points
    Apr 08, 2013 @ 11:42
    gary
    0

    Hi

    Have tried and tried and tried.

    Code below works perfectly via a desktop and laptop and anything "static", but a mobile device is just a blank page, map border and return button.

    Have all devices with GPS, everthing enabled, but still nothing.

    Can anyone please find the error? I'm sure it is something real simple - but then again. . . 

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage

     

    <head>

        

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />

    <link href="~/css/mobile.css" rel="stylesheet" />

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

    <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>

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

    </head>

    <script type="text/javascript">

     

        var map,

        currentPosition,

        directionsDisplay,

        directionsService,

        destinationLatitude = @CurrentPage.Up().Location.Split("," [0])[0]

    destinationLongitude = @CurrentPage.Up().Location.Split("," [0])[1]

    function initializeMapAndCalculateRoute(lat, lon) {

        directionsDisplay = new google.maps.DirectionsRenderer();

        directionsService = new google.maps.DirectionsService();

        currentPosition = new google.maps.LatLng(lat, lon);

        map = new google.maps.Map(document.getElementById('map_canvas'), {

            zoom: 15,

            center: currentPosition,

            mapTypeId: google.maps.MapTypeId.ROADMAP

        });

        directionsDisplay.setMap(map);

        var currentPositionMarker = new google.maps.Marker({

            position: currentPosition,

            map: map,

            title: "Current position"

        });

        // current position marker info

        /*

        var infowindow = new google.maps.InfoWindow();

        google.maps.event.addListener(currentPositionMarker, 'click', function() {

            infowindow.setContent("Current position: latitude: " + lat +" longitude: " + lon);

            infowindow.open(map, currentPositionMarker);

        });

        */

        // calculate Route

        calculateRoute();

    }

     

        function locError(error) {

            // the current position could not be located

        }

        function locSuccess(position) {

            // initialize map with current position and calculate the route

            initializeMapAndCalculateRoute(position.coords.latitude, position.coords.longitude);

        }

        function calculateRoute() {

     

            var targetDestination = new google.maps.LatLng(destinationLatitude, destinationLongitude);

            if (currentPosition != '' && targetDestination != '') {

                var request = {

                    origin: currentPosition,

                    destination: targetDestination,

                    travelMode: google.maps.DirectionsTravelMode["DRIVING"]

                };

                directionsService.route(request, function (response, status) {

                    if (status == google.maps.DirectionsStatus.OK) {

                        directionsDisplay.setPanel(document.getElementById("directions"));

                        directionsDisplay.setDirections(response);

                        /*

                            var myRoute = response.routes[0].legs[0];

                            for (var i = 0; i < myRoute.steps.length; i++) {

                                alert(myRoute.steps[i].instructions);

                            }

                        */

                        $("#results").show();

                    }

                    else {

                        $("#results").hide();

                    }

                });

            }

            else {

                $("#results").hide();

            }

        }

        $(document).live("pagebeforeshow", "#map_page", function () {

            // find current position and on success initialize map and calculate the route

                            navigator.geolocation.getCurrentPosition(locSuccess, locError);

        });

    </script>  

     

            <div id="map_page" data-role="page">

                <div data-role="header">

                    <h1><a data-ajax="false" href="/">directions to @CurrentPage.Up(1).Restaurant</a></h1>

                </div>

                <div data-role="content">   

                    <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">

                        <div id="map_canvas"></div><!-- mapCanvas -->

                    </div><!-- ui-bar-c -->

                    <div id="results" style="display:none;">

                        <div id="directions"></div><!-- directions -->

                    </div><!-- results -->

                </div><!-- content -->

                        <div class="return">

                <a href="@CurrentPage.Up().NiceUrl()"data-role="button" data-ajax="false" data-theme="a" data-inline="true" 

                    data-icon="arrow-l" data-iconpos="left">Return to map</a>

            </div><!-- return -->

            </div><!-- page -->        

     

    regards

    Gary

Please Sign in or register to post replies

Write your reply to:

Draft