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>
<meta charset="utf-8">
<title>Recherche adresse à partir des coordonnées -Reverse Geocoding</title>
<!-- autorisation Google -->
<script defer
src="https://maps.googleapis.com/maps/api/js?v=weekly&key=myKey&callback=initMap">
</script>
<style type="text/css">
html, body, #emplCarte {
height: 100%;
margin: 0px;
padding: 0px
}
#maBarre {
position:absolute; /*relatif au Container*/
top: 05px;
left: 20%;
z-index: 5;
background-color: #fafafa;
padding: 2px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
}
#ecriture {
width: 260px;
text-align: center;
}
</style>
<script>
var maCarte;
function initMap() {
maCarte = new google.maps.Map(document.getElementById("emplCarte"), {
zoom: 7,
center: {
lat: 44.731,
lng: 2.523 }
});
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
document.getElementById("submit").addEventListener("click", function() {
geocodeLatLng(geocoder, maCarte, infowindow);
});
}
function geocodeLatLng(geocoder, maCarte, infowindow) {
var input = document.getElementById("ecriture").value;
var latlngStr = input.split(",", 2);
var latlng = {
lat: parseFloat(latlngStr[0]),
lng: parseFloat(latlngStr[1])
};
geocoder.geocode(
{
location: latlng
},
function(results, status){
if (status === "OK") {
if (results[0]) {
maCarte.setZoom(11);
var marker = new google.maps.Marker({
position: latlng,
map: maCarte
});
infowindow.setContent(results[0].formatted_address);
infowindow.open(maCarte, marker);
} else {
window.alert("No results found");
}
} else {
window.alert("Geocoder failed due to: " + status);
}
}
);
}
</script>
</head>
<body>
<div id="maBarre">
<input id="ecriture" type="text" value="43.122107, 5.935084" />
<input id="submit" type="button" value="Reverse Geocode" />
</div>
<div id="emplCarte"></div>
</body>
</html>