Créer une carte de base Google
Cet exemple crée une carte Google centrée à Londres, en Angleterre:
Exemple
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
Essayez - le vous - même » Le reste de cette page décrit l'exemple ci-dessus, étape par étape.
1. Chargez le API Google
L'API Google Maps est une bibliothèque JavaScript. Il peut être ajouté à une page Web avec un <script> tag:
<script src="http://maps.googleapis.com/maps/api/js"></script>2. Définir Propriétés de la carte
Créer une fonction pour initialiser la carte:
function initialize() {
}Dans la fonction d'initialisation, créez un objet (mapProp) pour définir les propriétés de la carte:
var mapProp = {
center:new google.maps.LatLng(51.508742, -0.120850),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};La propriété centre indique où pour centrer la carte. Créer un objet LatLng pour centrer la carte sur un point précis. Passez les coordonnées dans l'ordre: latitude, longitude.
La propriété de zoom indique le niveau de zoom de la carte. zoom: 0 montre une carte de la Terre entièrement zoom arrière. niveaux de zoom supérieur zoomer à une résolution supérieure.
La propriété mapTypeId spécifie le type de carte pour afficher. Les types de cartes suivants sont pris en charge:
- ROADMAP (normal, default 2D map)
- SATELLITE (photographic map)
- HYBRID (photographic map + roads and city names)
- TERRAINS (map with mountains, rivers, etc.) des (map with mountains, rivers, etc.) des (map with mountains, rivers, etc.)
3. Créez une carte Container
Créer un <div> élément pour maintenir la carte. Utilisez CSS à la taille de l'élément:
<div id="googleMap" style="width:500px;height:380px;"></div>La carte sera toujours "inherit" de sa taille de son élément conteneur.
4. Créez un objet Map
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);Le code ci - dessus crée une nouvelle carte à l' intérieur du <div> élément avec id = "googleMap", en utilisant les paramètres qui sont passés (mapProp) .
5. Ajouter un écouteur d'événement pour afficher la carte
Ajouter un auditeur DOM qui exécutera le initialize() fonction de la charge de la fenêtre (when the page is loaded) :
google.maps.event.addDomListener(window, 'load', initialize);
Chargement asynchrone
Il est également possible de charger l'API Google Maps à la demande.
L'exemple ci-dessous utilise window.onload pour charger l'API Google Maps après que la page soit entièrement chargée.
Le loadScript() fonction crée l'API Google Maps <script> tag. En outre, le rappel = initialiser le paramètre est ajoutée à la fin de l'URL pour exécuter l' initialize() fonction après que l'API est complètement chargée:
Exemple
function loadScript()
{
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
Essayez - le vous - même » Différentes cartes
L'exemple ci-dessous définit quatre cartes sur une seule page Web (quatre cartes avec différents types de cartes):
Exemple
var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapProp1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapProp2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapProp3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapProp4);
Essayez - le vous - même » Google API Key
Google permet à votre site Web pour appeler les API Google, plusieurs milliers de fois par jour.
Si vous prévoyez pour le trafic lourd, vous devriez obtenir une clé API gratuit de Google.
Allez à https://console.developers.google.com pour obtenir une clé gratuite.
Google Maps attend à trouver la clé API dans le paramètre clé lors du chargement d' une API:
<script src="http://maps.googleapis.com/maps/api/js? key=YOUR_KEY "></script>