Le service de geocodage : geocoder de l’api Google Map permet de récupérer les coordonnées d’une adresse ou inversement, une adresse à partir de ses coordonnées.
La réponse retournée par l’api contient plusieurs informations comme par exemple le code postal, la région, le département ou encore le pays (exemple de retour Json google Map).
Dans cet exemple, 2 utilisations sont abordées :
- Obtenir la ville, le code postal, le département et le pays à l’aide des coordonnées
- Obtenir le code postal, le département et le pays à l’aide de l’adresse
Récupération du code postal, du département et du pays à partir d’une adresse ou de ses coordonnées
Code source de l’application
<script type="text/javascript">
/* Déclaration des variables */
var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();
var marker;
/* Fonction d'initialisation de la map appelée au chargement de la page */
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(48.8566667, 2.3509871);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
/* Fonction chargée de géocoder l'adresse */
function codeAddress() {
var address = document.getElementById("adr").value;
geocoder.geocode( { 'address': address + ' France'}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var coords = results[0].geometry.location
map.setCenter(coords);
var marker = new google.maps.Marker({
map: map,
position: coords
});
document.getElementById('latlng').value = coords.lat()+','+coords.lng();
codeLatLng(coords.lat()+','+coords.lng());
} else {
alert("Le geocodage n\'a pu etre effectue pour la raison suivante: " + status);
}
});
}
/* Fonction de géocodage inversé (en fonction des coordonnées de l'adresse) */
function codeLatLng(input) {
var latlngStr = input.split(",",2);
var lat = parseFloat(latlngStr[0]);
var lng = parseFloat(latlngStr[1]);
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
map.setZoom(11);
marker = new google.maps.Marker({
position: latlng,
map: map
});
var elt = results[0].address_components;
for(i in elt){
if(elt[i].types[0] == 'postal_code')
document.getElementById('cp').value = elt[i].long_name;
if(elt[i].types[0] == 'locality')
document.getElementById('adr').value = elt[i].long_name;
if(elt[i].types[0] == 'administrative_area_level_2')
document.getElementById('dpt').value = elt[i].long_name;
if(elt[i].types[0] == 'country')
document.getElementById('pays').value = elt[i].long_name;
}
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
map.setCenter(latlng);
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
function retrieve(){
var input = document.getElementById("latlng").value;
codeLatLng(input);
}
## CODE HTML
<body onload="initialize()">
<div>
latitude, longitude : <input id="latlng" type="text" value="48.3906042,-4.4869013">
<input type="button" value="Obtenir la ville..." onclick="retrieve()">
Ville / adresse : <input id="adr" type="text" value="">
<input type="button" value="Obtenir le code postal..." onclick="codeAddress()">
code postal : <input id="cp" type="text" value="">
département : <input id="dpt" type="text" value="">
pays : <input id="pays" type="text" value="">
</div>
<div id="map_canvas"></div>
</body>
</script>
Exemple de retour JSON de l’api Google Map
{
"status": "OK",
"results": [ {
"types": [ "street_address" ],
"formatted_address": "1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA",
"address_components": [ {
"long_name": "1600",
"short_name": "1600",
"types": [ "street_number" ]
}, {
"long_name": "Amphitheatre Pkwy",
"short_name": "Amphitheatre Pkwy",
"types": [ "route" ]
}, {
"long_name": "Mountain View",
"short_name": "Mountain View",
"types": [ "locality", "political" ]
}, {
"long_name": "California",
"short_name": "CA",
"types": [ "administrative_area_level_1", "political" ]
}, {
"long_name": "United States",
"short_name": "US",
"types": [ "country", "political" ]
}, {
"long_name": "94043",
"short_name": "94043",
"types": [ "postal_code" ]
} ],
"geometry": {
"location": {
"lat": 37.4219720,
"lng": -122.0841430
},
"location_type": "ROOFTOP",
"viewport": {
"southwest": {
"lat": 37.4188244,
"lng": -122.0872906
},
"northeast": {
"lat": 37.4251196,
"lng": -122.0809954
}
}
}
} ]
}
