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.
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>
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.
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
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>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 });
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
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
is working on a reply...