en noir : code obligatoire
en vert : explications
en rouge : code personnalisable
en grisé : construction d'une carte simple par défaut
<!DOCTYPE html>
<html>
<head>
<title>Géolocalisation d'une adresse et inversement avec Google</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body, #carte {
height: 100%;
margin: 0px;
padding: 0px
}
.Container{
position:relative;
height:100%;
}
.maBarre {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
font-size: 13px;
position:absolute;
bottom: 05px;
left: 15px;
background-color: #fafafa;
padding: 2px;
border: 1px solid #999;
}
</style>
</head>
<body>
<!-- ajouter dans la div après id="carte" ex: style="top:5px;left:5px;width:800px; height:600px" -->
<div class="Container">
<div id="carte" ></div>
<div class="maBarre">
coordonnées : <input id="latlng" type="text" value="43.122082, 5.934941" size="35" onFocus="javascript:this.value=''"><input type="button" value="Adresse _ Postale" onclick="retrieve()"><br />
ville /adresse : <input id="adr" type="text" value="" size="35" onFocus="javascript:this.value=''"><input type="button" value="Géolocalise /carte" onclick="codeAddress()"> ___ (ne rien écrire dessous) ___<br />
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>
<script>
/* Déclaration des variables */
var geocoder;
var macarte;
var infowindow = new google.maps.InfoWindow();
var marker;
/* Fonction d'initialisation de la map appelée au chargement de la page */
function InitCarte() {
geocoder = new google.maps.Geocoder();
var Paris = new google.maps.LatLng(48.8566667, 2.3509871);
var Options = {
zoom: 7,
center: Paris,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
macarte = new google.maps.Map(document.getElementById("carte"), Options);
}
/* 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
macarte.setCenter(coords);
var marker = new google.maps.Marker({
map: macarte,
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 = {lat: lat, lng: lng};//new google.maps.LatLng(lat, lng);
macarte2 = new google.maps.Map(document.getElementById("carte"), {zoom: 17,center: latlng, mapTypeId: google.maps.MapTypeId.SATELLITE});
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
//macarte2.setZoom(16);
marker = new google.maps.Marker({
position: latlng,
map: macarte2
});
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(macarte2, marker);
macarte2.setCenter(latlng);
}
} else {
alert("Geocoder non: " + status);
}
});
}
function retrieve(){
var input = document.getElementById("latlng").value;
codeLatLng(input);
}
</script>
<!-- autorisation Google -->
<script src="https://maps.googleapis.com/maps/api/js?key=MaKey&callback=InitCarte"
async defer></script>
<noscript>
<p>Il semble que JavaScript soit désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
</body>
</html>