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 simple d'une adresse avec Google dans une pleine fnêtre</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 {
position:absolute;
top: 05px;
left: 50%;
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">
<input id="address" type="textbox" value="68 Cours Lafayette, 83000 Toulon, France" size="35" onFocus="javascript:this.value=''" />
<input type="button" value="Localisation" onclick="codeAddress()">
</div>
</div>
<script>
var markers = new Array();
var i = 0;
var geocoder;
var macarte;
var marqueur;
function InitCarte() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(37.8829,-4.7746); // initiation d'une carte avec contrôles par défaut
var mapOptions = {
zoom: 8,
center: latlng }
macarte = new google.maps.Map(document.getElementById('carte'), mapOptions);
}
function codeAddress() {
var adresse = document.getElementById('address').value;
geocoder.geocode( { 'address': adresse}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
macarte.setCenter(results[0].geometry.location);
marqueur = new google.maps.Marker({
map: macarte,
position: results[0].geometry.location,
});
/* Permet de supprimer le marqueur précédemment affiché */
markers.push(marqueur);
if(markers.length > 1)
markers[(i-1)].setMap(null);
i++; }
else {alert('Geocode n\'a pas trouvé car : ' + status);}
});
}
</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>