1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>[Google API v3]Recherche avec Autocompletion</title>
<meta name="Author" content="NoSmoking">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<style type="text/css">
html, body {
height:100%;
margin:0;
padding:0;
font-family:Verdana, sans-serif;
font-size:1em;
background-color:#FAFAFA;
}
h1 {
color:#4488bb;
font-size:1.5em;
margin:0;
padding:0.5em;
border:1px solid #4488bb;
}
h1 span{
font-size:0.6em;
font-style:italic;
float:right;
}
#page {
overflow:hidden;
margin:0 auto;
padding:0;
width:800px;
min-height:100%;
background-color:#FFF;
border-left: 1px solid #C0C0C0;
border-right: 1px solid #C0C0C0;
}
#entete{
padding:1em;
}
#search{
width:600px;
margin:1em auto;
}
#div_carte{
height:600px;
width:600px;
margin:auto;
border:1px solid #c0c0c0;
}
#input_search{
font-family:Verdana, sans-serif;
font-size:1.0em;
border:1px solid #e0e0e0;
line-height:1.5em;
height:1.5em;
}
/* surclasse le CSS par défaut de l'API */
#input_search.pac-placeholder{
color: black;
}
</style>
<script type="text/javascript">
function initCarte(){
var oMap = new google.maps.Map(document.getElementById('div_carte'),{
backgroundColor : '#fff',
center: new google.maps.LatLng( 46.80, 1.70),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
);
var oInput = document.getElementById('input_search');
var oAutoComplete = new google.maps.places.Autocomplete( oInput);
oAutoComplete.bindTo('bounds', oMap);
var oMarker = new google.maps.Marker({
map: oMap
});
google.maps.event.addListener( oAutoComplete, 'place_changed', function(){
var oPlace = this.getPlace();
// AJOUT pour gestion sur événement */
oInput.defaultValue = oPlace.name;
// adapte au viewport
if( oPlace.geometry.viewport) {
oMap.fitBounds( oPlace.geometry.viewport);
}
else {
oMap.setCenter( oPlace.geometry.location);
oMap.setZoom(12);
}
oMarker.setPosition( oPlace.geometry.location);
});
// gestion sur la saisie
oInput.onfocus = function(){
this.value = this.defaultValue;
};
oInput.onblur = function(){
// met en queue la mise à jour
setTimeout( function(){
if( oInput.value === ''){
oInput.value = oInput.defaultValue;
}
else{
oInput.defaultValue = oInput.value;
}
},1);
};
}
google.maps.event.addDomListener(window, 'load', initCarte);
</script>
</head>
<body>
<div id="page">
<div id="entete">
<h1><span>[Google Maps API V3]</span>Recherche avec Autocompletion</h1>
</div>
<div id="search">
<label for="input_search">Recherche : </label>
<!-- important de mettre placeholder à "" -->
<input id="input_search" type="text" size="50" value="Paris" placeholder="">
</div>
<div id="div_carte"></div>
</div>
</body>
</html> |
Partager