Bonjour,
voici ma problématique ; je développe actuellement un site pour une petite chaine de resto en france.
Ce que je voudrais c'est géolocaliser l'internaute et lui indiquer le resto le plus proche de l'endroit où il se trouve.
Or, après moulte recherches, je n'arrive à rien.
J'ai néanmoins un script qui me permet de géolocaliser l'internaute mais après c'est le flou le plus total pour arriver à utiliser correctement cette info.
Voici le code :
Si quelqu'un peut m'aider Merci d'avance.
voici ma problématique ; je développe actuellement un site pour une petite chaine de resto en france.
Ce que je voudrais c'est géolocaliser l'internaute et lui indiquer le resto le plus proche de l'endroit où il se trouve.
Or, après moulte recherches, je n'arrive à rien.
J'ai néanmoins un script qui me permet de géolocaliser l'internaute mais après c'est le flou le plus total pour arriver à utiliser correctement cette info.
Voici le code :
<html>
<title>hello world !!</title>
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cook.js"></script>
<script type="text/javascript">
function success(position) {
var s = document.querySelector('#status');
if (s.className == 'success') {
return;
}
s.innerHTML = "found you!";
s.className = 'success';
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcanvas';
mapcanvas.style.height = '100%';
mapcanvas.style.width = '100%';
document.querySelector('#map').appendChild(mapcanvas);
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"You are here!"
});
$.cookie("MyLat", position.coords.latitude);
$.cookie("MyLon", position.coords.longitude);
}
function error(msg) {
var s = document.querySelector('#status');
s.innerHTML = typeof msg == 'string' ? msg : "failed";
s.className = 'fail';
// console.log(arguments);
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
error('not supported');
}
$(document).ready(function()
{
$("#check").click(function()
{
var lat = $.cookie("MyLat");
var lon = $.cookie("MyLon");
alert('Latitued: '+lat);
alert('Longitude: '+lon);
var url="http://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+lon+"&sensor=false";
alert('Google Map API: '+url);
});
});
</script>
</head>
<body style="color:#fff;background:#333; font-family:Arial, Helvetica, sans-serif">
<div style='width:100%;height:auto'>
<div id="status">Loading.............</div>
<div id="map"></div>
</div>
</body>
</html>Si quelqu'un peut m'aider Merci d'avance.