Télécharger le code : Géo-autocompletion avec gmap3
Cet exemple montre comment créer une fonction de recherche d'adresse postale classique par autocomplétion.
Cet exemple utilise le plugin d'autocomplétion de JQuery-UI.
Une fois l'adresse validée, un marqueur vient symboliser son emplacement et la carte est automatiquement centrée sur celui-ci (le marqueur précédent, s'il existe, est supprimé).
Carte
Saisissez votre adresse postale ici :
Code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8"/>
<title>Votre titre de page</title>
<link rel="stylesheet" type="text/css" href="http://www.votredomaine.fr/js/jquery-ui-1.8.12.custom.css"/>
<style>
*{
font-family: verdana;
font-size: 12px;
}
body{
text-align:center;
}
.maCarte{
width: 100%;
height: 500px;
}
.ui-menu .ui-menu-item{
text-align: left;
font-weight: normal;
}
.ui-menu .ui-menu-item a.ui-state-hover{
border: 1px solid red;
background: #FFBFBF;
color: black;
font-weight:bold;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://www.votredomaine.fr/js/jquery-ui-1.8.12.custom.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="http://www.votredomaine.fr/js/gmap3.js"></script>
<script type="text/javascript">
$(function(){
$("#maCarte").gmap3();
$('#adresse').autocomplete({
//This bit uses the geocoder to fetch address values
source: function(request, response) {
$("#maCarte").gmap3({
action:'getAddress',
address: request.term,
callback:function(results){
if (!results) return;
response($.map(results, function(item) {
return {
label: item.formatted_address,
value: item.formatted_address,
latLng: item.geometry.location
}
}));
}
});
},
//This bit is executed upon selection of an address
select: function(event, ui) {
$("#maCarte").gmap3(
{
action:'clear', name:'marker'
},
{
action:'addMarker',
latLng:ui.item.latLng,
map:{
center:true
}
}
);
}
});
});
</script>
</head>
<body>
<input type="text" id="adresse" size="60">
<div id="maCarte" class="gmap3"></div>
</body>
</html>