Vous êtes prêt !

Pour passer à l'étape de développement, accédez à notre documentation pour les développeurs.

Activer Google Maps JavaScript API

Pour commencer, nous allons vous guider à travers la console Google Developers et effectuer deux ou trois petites choses :

  1. Créer ou sélectionner un projet
  2. Activer Google Maps JavaScript API et les services connexes
  3. Créer les clés appropriées
Continuer

Ajouter une carte Google avec un marqueur à votre site Web

Introduction

Ce didacticiel vous explique comment ajouter une carte Google simple avec un marqueur à une page Web. Il convient aux personnes ayant un niveau de connaissance débutant ou intermédiaire en HTML et CSS, et quelques connaissances sur JavaScript. Pour un guide avancé sur la création de cartes, lisez le guide du développeur.

Voici la carte que vous allez créer à l'aide de ce didacticiel.

La section ci-dessous affiche l'intégralité du code nécessaire pour créer la carte dans ce didacticiel.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}
<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  height: 400px;
  width: 100%;
 }
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Essayez par vous-même

Placez la souris en haut à droite du bloc de code pour le copier ou l'ouvrir dans JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <style>
       #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Premiers pas

Trois étapes sont nécessaires pour créer une carte Google avec un marqueur sur votre page Web :

  1. Créer une page HTML
  2. Ajouter une carte avec un marqueur
  3. Obtenir une clé d'API

Il vous faut un navigateur Web. Choisissez-en un connu comme Google Chrome (recommandé), Firefox, Safari ou Internet Explorer, en fonction de votre plateforme.

Étape 1 : Créer une page HTML

Voici le code d'une page Web HTML de base :

<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  width: 100%;
  height: 400px;
  background-color: grey;
}
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        width: 100%;
        height: 400px;
        background-color: grey;
      }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
  </body>
</html>

Notez qu'il s'agit d'une page très simple contenant un en-tête de niveau trois (h3), un seul élément div et un élément style qui sont décrits dans le tableau ci-dessous. Vous pouvez ajouter le contenu de votre choix sur la page Web.

Essayez vous-même

Deux boutons se trouvent dans le coin supérieur droit de l'échantillon de code. Cliquez sur le bouton situé le plus à gauche pour ouvrir l'échantillon dans JSFiddle.

Comprendre le code

Ce tableau décrit chacune des sections du code ci-dessus.

Code et description
<html>
 <head>
 </head>
 <body>
 </body>
</html>

Crée une page HTML se composant d'un en-tête et d'un corps.
<h3>My Google Maps Demo</h3>

Ajoute un en-tête de niveau trois au-dessus de la carte.
<div id="map"></div>

Définit une zone de la page destinée à la carte Google.
À ce stade du didacticiel, l'élément div apparaît simplement comme un bloc gris parce que vous n'avez pas encore ajouté la carte. Il est gris en raison du CSS que vous avez appliqué. Voir ci-dessous.
<style>
 #map {
   width: 100%;
   height: 400px;
   background-color: grey;
 }
</style>

L'élément style dans head définit la taille du div de la carte.
Définissez la largeur et la hauteur du div sur des valeurs supérieures à 0 px afin que la carte soit visible.
Dans ce cas, le div est défini sur une hauteur de 500 pixels et une largeur de 100 %, pour un affichage sur toute la largeur de la page Web. Appliquez background-color: grey au div pour visualiser la zone de la carte sur la page Web.

Étape 2 : Ajouter une carte avec un marqueur

Cette section explique comment charger Google Maps JavaScript API sur votre page Web et comment écrire votre propre JavaScript qui utilise l'API pour ajouter une carte affichant un marqueur.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}
<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  height: 400px;
  width: 100%;
 }
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Essayez vous-même

Deux boutons se trouvent dans le coin supérieur droit de l'échantillon de code. Cliquez sur le bouton situé le plus à gauche pour ouvrir l'échantillon dans JSFiddle.

Comprendre le code

Remarquez que l'échantillon ci-dessus ne contient plus de CSS qui colore le div en gris. En effet, le div contient désormais une carte.

Ce tableau décrit chacune des sections du code ci-dessus.

Code et description
<script>
async defer
src ="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
</script>

L'élément script charge l'API à partir de l'URL spécifiée.
Le paramètre callback exécute la fonction initMap une fois que l'API est complètement chargée.
L'attribut async autorise le navigateur à continuer à rendre le reste de votre page pendant le chargement de l'API.
Le paramètre key contient votre clé d'API. Votre propre clé d'API n'est pas nécessaire lors des essais avec ce didacticiel dans JSFiddle. Voir Étape 3 : Obtenir une clé d'API pour savoir comment obtenir votre propre clé d'API ultérieurement.
<script>
  function initMap() {
  }
</script>

La fonction initMap initialise et ajoute la carte lors du chargement de la page Web. Utilisez une balise script pour inclure votre propre JavaScript qui contient la fonction initMap.
getElementById

Ajoutez cette fonction pour trouver le div de la carte sur la page Web.
new google.maps.Map()

Ajoutez ce nouvel objet Google Maps pour créer une carte dans l'élément div.
{
  var uluru = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

}

Ajoutez des propriétés à la carte, y compris le centre et le niveau de zoom. Voir la documentation pour d'autres options de propriété.
La propriété center indique à l'API où centrer la carte. Les coordonnées de la carte sont définies dans l'ordre suivant : latitude, longitude.
La propriété zoom spécifie le niveau de zoom de la carte. Zoom : 0 est le niveau de zoom le plus faible et affiche la Terre dans sa totalité. Définissez un niveau de zoom plus important afin de zoomer sur la Terre avec une résolution supérieure.
var marker = new google.maps.Marker({
  position: uluru,
  map: map
});

Ajoutez ce code pour placer un marqueur sur la carte. position - cette propriété définit la position du marqueur.

Étape 3 : Obtenir une clé d'API

Cette section décrit comment authentifier votre application sur Google Maps JavaScript API à l'aide de votre propre clé d'API.

Pour obtenir une clé d'API, procédez comme suit :

  1. Accédez à la Google API Console.
  2. Créez ou sélectionnez un projet.
  3. Cliquez sur Continue pour activer l'API et les services connexes.
  4. Sur la page Credentials, demandez une clé d'API (et définissez les restrictions de la clé d'API).

    Remarque : Si vous possédez une clé d'API sans restriction ou une clé avec des restrictions de navigateur, vous pouvez utiliser cette clé.

  5. Pour éviter le vol de quota, sécurisez votre clé d'API conformément aux meilleures pratiques suivantes.

  6. (facultatif) Activez la facturation. Pour plus d'informations, voir Limites d'utilisation .

  7. Copiez l'intégralité du code du didacticiel de cette page dans votre éditeur de texte. Si vous n'avez pas encore d'éditeur de texte, voici quelques recommandations : Vous pouvez utiliser : Notepad++ (pour Windows), TextEdit (pour macOS), gedit, KWrite, entre autres (pour les ordinateurs Linux).
  8. Remplacez la valeur du paramètre key dans l'URL par votre propre clé d'API (la clé d'API que vous venez d'obtenir).

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
      async defer>
    </script>
    
  9. Enregistrez ce fichier avec un nom se terminant par .html, tel que google-maps.html.

  10. Chargez le fichier HTML dans un navigateur Web en le faisant glisser depuis le Bureau vers votre navigateur. Dans la plupart des systèmes d'exploitation, vous pouvez également double-cliquer dessus.

Astuces et résolution des erreurs

  • Utilisez l'interface JSFiddle pour afficher le code HTML, CSS et JavaScript sur des volets différents. Vous pouvez exécuter le code et afficher le résultat dans le volet Results.
  • Vous pouvez ajuster des options comme le style et les propriétés afin de personnaliser la carte. Pour plus d'informations sur la personnalisation des cartes, consultez Maps JavaScript API.
  • Utilisez la Developer Tools Console dans votre navigateur Web pour tester et exécuter le code, lire des rapports d'erreur et résoudre des problèmes concernant le code.

    Raccourcis clavier pour ouvrir la console dans Chrome : Commande + Option + J (sur Mac) ou Contrôle + Maj + J (sur Windows).

Envoyer des commentaires concernant…

Google Maps JavaScript API
Google Maps JavaScript API
Besoin d'aide ? Consultez notre page d'assistance.