<?php
mysql_connect("localhost","root","");
mysql_select_db("map");
$a=$_POST['latti'];
$b=$_POST['longi'];
$a1=$a+0.0001;
$a2=$a-0.0001;
$b1=$b+0.0001;
$b2=$b-0.0001;
$requet=mysql_query("select *from marker where ((lat BETWEEN '$a1' AND '$a2')AND(lng BETWEEN '$b1' AND '$b2')) ");?>
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="content-language" content="en" />
<meta name="author" content="Johan Säll Larsson" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="keywords" content="Google maps, jQuery, plugin, mobile, iphone, ipad, android, HTML5" />
<meta name="description" content="Examples with jQuery mobile, Google maps and HTML5" />
<link rel="schema.DC" href="
http://purl.org/dc/elements/1.1/" />
<meta name="DC.title" content="jQuery mobile with Google maps - Google maps jQuery plugin" />
<meta name="DC.subject" content="Google maps;jQuery;plugin;mobile;iphone;ipad;android;HTML5" />
<meta name="DC.description" content="Examples with jQuery mobile, Google maps and HTML5" />
<meta name="DC.creator" content="Johan Säll Larsson" />
<meta name="DC.language" content="en" />
<link type="text/css" rel="stylesheet" href="css/jquery-mobile-1.0/jquery.mobile.css" />
<link type="text/css" rel="stylesheet" href="css/mobile.css" />
<link type="text/css" rel="stylesheet" href="css/960/min/960.css" />
<link type="text/css" rel="stylesheet" href="css/960/min/960_16_col.css" />
<link type="text/css" rel="stylesheet" href="css/normalize/min/normalize.css" />
<link type="text/css" rel="stylesheet" href="css/prettify/min/prettify.css" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/modernizr-2.0.6/modernizr.min.js"></script>
<script type="text/javascript" src="
http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="js/jquery-1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-mobile-1.0/jquery.mobile.min.js"></script>
<script type="text/javascript" src="js/jquery.ui-1.8.15/jquery.ui.autocomplete.min.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript" src="../ui/jquery.ui.map.js"></script>
<script type="text/javascript" src="../ui/jquery.ui.map.services.js"></script>
<script type="text/javascript" src="../ui/jquery.ui.map.extensions.js"></script>
<script type="text/javascript" src="
http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/underscore-1.2.2/underscore.min.js"></script>
<script type="text/javascript" src="js/backbone-0.5.3/backbone.min.js"></script>
<script type="text/javascript" src="js/prettify/prettify.min.js"></script>
<script type="text/javascript">
var mobileDemo = { 'center': '36.826875,10.167160', 'zoom': 10 };
////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////
$('#directions_map').live('pageinit', function() {
demo.add('directions_map', function() {
$('#map_canvas_1').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function() {
var self = this;
self.set('getCurrentPosition', function() {
self.refresh();
self.getCurrentPosition( function(position, status) {
if ( status === 'OK' ) {
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
if ( !self.get('markers').client ) {
self.addMarker({ 'id': 'client', 'position': latlng, 'bounds': true ,'icon' : 'images/point.png', 'title' : 'My Current Location'});
} else {
self.get('markers').client.setPosition(latlng);
map.panTo(latlng);
}
self.search({ 'location': latlng }, function(results, status) {
if ( status === 'OK' ) {
$('#from').val(results[0].formatted_address);
var latti= results[0].geometry.location.lat();
var longi=results[0].geometry.location.lng();
$.post(latti);
$.post(longi);
$('#to').val(latti+','+longi);
}
});
} else {
alert('Unable to get current position');
}
});
});
$('#submit').click(function() {
self.displayDirections({ 'origin': $('#from').val(), 'destination': $('#to').val(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING }, { 'panel': document.getElementById('directions')}, function(response, status) {
( status === 'OK' ) ? $('#results').show() : $('#results').hide();
});
return false;
});
}});
<?php
while ($donnees = mysql_fetch_array($reponse)){
?>
$('#map_canvas_1').gmap('addMarker', { 'bounds':true, 'icon' : 'images/resto.png','position': new google.maps.LatLng(<?php echo $donnees['Lat']; ?>,<?php echo $donnees['Lng']; ?>), 'animation': google.maps.Animation.DROP}, function(map, marker){
var message = <?php echo $donnees['Nom']; ?>;
var infowindow = new google.maps.InfoWindow(
{ content: message,
size: new google.maps.Size(50,50)
})
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
});
}).load('directions_map');
});
$('#directions_map').live('pageshow', function() {
demo.add('directions_map', $('#map_canvas_1').gmap('get', 'getCurrentPosition')).load('directions_map');
});
</script>
<?php
mysql_close() ;
}
?>
</head>
<?PHP include("config.inc.php"); ?>
Sodexo Map
[# Ma directions]
Results
<form name="f1" method="POST" action="derection.html">
</form>
<li>
Home
</li>
<li>
Refresh
</li>
<li>
Search
</li>
<li>
Info
</li>
</html>