Google Maps de base
Créer une carte Google de base
Cet exemple crée une carte Google Maps centrée sur Londres, en Angleterre :
Exemple
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp= {
center:new
google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</body>
</html>
Le reste de cette page décrit l'exemple ci-dessus, étape par étape.
Le conteneur et la taille de la carte
La carte a besoin d'un élément HTML pour contenir la carte :
<div id="googleMap" style="width:100%;height:400px"></div>
Définissez également la taille de la carte.
Créer une fonction pour définir les propriétés de la carte
function myMap() {
var mapProp = {
center:new
google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
La variable mapProp définit les propriétés de la carte.
La propriété center spécifie où centrer la carte (en utilisant les coordonnées de latitude et de longitude).
La propriété zoom spécifie le niveau de zoom de la carte (essayez d'expérimenter avec le niveau de zoom).
La ligne : var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); crée une nouvelle carte à l'intérieur de l'élément <div> avec id="googleMap", en utilisant les paramètres passés (mapProp).
Cartes multiples
L'exemple ci-dessous définit quatre cartes avec différents types de cartes :
Exemple
var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapOptions1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapOptions2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapOptions3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapOptions4);
Clé API Google gratuite
Google permet à un site Web d'appeler n'importe quelle API Google gratuitement, des milliers de fois par jour.
Accédez à https://developers.google.com/maps/documentation/javascript/get-api-key pour savoir comment obtenir une clé API.
Google Maps s'attend à trouver la clé API dans le paramètre clé lors du chargement d'une API :
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>