Pour tester ce problème de géolocalisation, j'ai copié le code suivant sur le tutoriel de Jonathan Verrecchia sur html5. Quand je transfère sur mon Ipad 2 ce code qui fonctionne correctement sur Firefox, j'obtiens bien l 'affichage de la carte de démarrage, mais pas la carte correspondant à la localisation ni le point de localisation :
<!doctype html>
<!--html xmlns="http://www.w3.org/1999/xhtml"-->
<html xmlns="http://www.w3.org/TR/2014/PR-html5-20140916/">
<html lang="fr">
<head>
<title>Géolocalisation</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% ; width:100%;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var previousPosition = null;
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 10,
center: new google.maps.LatLng(46.71559, 0.38836),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
if (navigator.geolocation){
var watchId = navigator.geolocation.watchPosition(successCallback, null, {enableHighAccuracy:true});
}
else{
alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");
}
function successCallback(position){
map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
var marker = new google.maps.Marker({
position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
map: map
});
if (previousPosition){
var newLineCoordinates = [
new google.maps.LatLng(previousPosition.coords.latitude, previousPosition.coords.longitude),
new google.maps.LatLng(position.coords.latitude, position.coords.longitude)];
var newLine = new google.maps.Polyline({
path: newLineCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
newLine.setMap(map);
}
previousPosition = position;
};
</script>
</head>
<body onLoad="initialize()">
<div id="map_canvas"></div>
</body>
</html>