Ajouter une carte Google avec un repère à votre site Web

Introduction

Ce tutoriel explique comment ajouter une carte Google simple avec un repère à 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 en savoir plus sur la création de cartes, consultez le guide du développeur.

Voici la carte que vous allez créer à l'aide de ce tutoriel. Le repère se trouve à Uluru (aussi appelé Ayers Rock), dans le parc national d'Uluru-Kata Tjuta.

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

TypeScript

// Initialize and add the map
function initMap(): void {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;index.js

CSS

/* Set the size of the div element that contains the map */
#map {
  height: 400px; /* The height is 400 pixels */
  width: 100%; /* The width is the width of the web page */
}
style.css

HTML

<html>
  <head>
    <title>Add Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!--
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>index.html

Essayer l'exemple

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Commencer

Pour créer une carte Google avec un repère sur votre page Web, trois étapes sont nécessaires :

Créer une page HTML
Ajouter une carte avec un repère
Obtenir une clé API

Il vous faut un navigateur Web. Choisissez-en un connu, tel que Google Chrome (recommandé), Firefox, Safari ou Edge, en fonction de votre plate-forme, dans la liste des navigateurs compatibles.

Étape 1 : Créez une page HTML

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

<!DOCTYPE html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Add Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!--
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Notez qu'il s'agit d'une page très simple contenant un en-tête de niveau 3 (h3) et un seul élément div. Vous pouvez ajouter le contenu de votre choix sur la page Web.

Comprendre le code

Le code ci-dessous crée une page HTML composée d'un titre et d'un corps.

<html>
 <head>
 </head>
 <body>
 </body>
</html>

Vous pouvez ajouter un titre de niveau 3 au-dessus de la carte à l'aide du code ci-dessous.

<h3>My Google Maps Demo</h3>

Le code ci-dessous définit une zone de la page destinée à votre carte Google.

<!--The div element for the map -->
<div id="map"></div>

À ce stade du tutoriel, le div apparaît comme un simple bloc gris, car vous n'avez pas encore ajouté de carte. Le code ci-dessous décrit le code CSS qui définit la taille et la couleur du div.

/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
/* Set the size of the div element that contains the map */
#map {
  height: 400px; /* The height is 400 pixels */
  width: 100%; /* The width is the width of the web page */
}

Dans le code ci-dessus, l'élément style définit la taille du div pour votre carte. Définissez la largeur et la hauteur du div sur des valeurs supérieures à 0 px afin que la carte soit visible. Ici, le div est défini sur une hauteur de 400 pixels et une largeur de 100 %, pour un affichage sur toute la largeur de la page Web.

Étape 2 : Ajoutez une carte avec un repère

Cette section explique comment charger l'API Maps JavaScript sur votre page Web et comment écrire votre propre JavaScript qui utilise l'API pour ajouter une carte avec un repère.

TypeScript

// Initialize and add the map
function initMap(): void {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;index.js

CSS

/* Set the size of the div element that contains the map */
#map {
  height: 400px; /* The height is 400 pixels */
  width: 100%; /* The width is the width of the web page */
}
style.css

HTML

<html>
  <head>
    <title>Add Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!--
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>index.html

Essayer l'exemple

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Comprendre le code

Dans le code ci-dessous, le script charge l'API à partir de l'URL spécifiée.

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

Dans le code ci-dessus, le paramètre callback exécute la fonction initMap une fois l'API chargée. L'attribut async permet au navigateur de continuer à analyser le reste de la page pendant que l'API charge. Une fois le chargement terminé, le navigateur se met en pause et exécute immédiatement le script. Le paramètre key contient votre clé API.

Reportez-vous à l'Étape 3 : Obtenez une clé API pour savoir comment obtenir votre propre clé API ultérieurement.

Le code ci-dessous contient la fonction initMap qui initialise et ajoute la carte pendant que la page Web charge. Utilisez un tag script pour inclure votre propre JavaScript contenant la fonction initMap.

  function initMap() {}

Ajoutez la fonction document.getElementById() pour trouver la carte div sur la page Web.

Le code ci-dessous construit un objet Google Maps et ajoute des propriétés à la carte, y compris le centre et le niveau de zoom. Consultez la documentation sur les autres options de propriété.

TypeScript

// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(
  document.getElementById("map") as HTMLElement,
  {
    zoom: 4,
    center: uluru,
  }
);index.ts

JavaScript

// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: uluru,
});index.js

Dans le code ci-dessus, new google.maps.Map() crée un objet carte Google. La propriété center indique à l'API où centrer la carte.

Découvrez comment obtenir des coordonnées de latitude/longitude ou convertir une adresse en coordonnées géographiques.

La propriété zoom spécifie le niveau de zoom de la carte. 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.

Le code ci-dessous place un repère sur la carte. La propriété position définit la position du repère.

TypeScript

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  position: uluru,
  map: map,
});index.ts

JavaScript

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  position: uluru,
  map: map,
});index.js

En savoir plus sur les repères :

Étape 3 : Obtenez une clé API

Cette section explique comment authentifier votre application auprès de l'API Maps JavaScript à l'aide de votre propre clé API.

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

Accédez à la console Google Cloud.
Créez ou sélectionnez un projet.
Cliquez sur Continuer pour activer l'API et les services connexes.
Sur la page Identifiants, obtenez une clé API (et définissez les restrictions associées). Si vous avez une clé API sans restriction ou une clé avec des restrictions de navigateur, vous pouvez l'utiliser.
Pour éviter le vol de quotas et sécuriser votre clé API, consultez Utiliser des clés API.
Activez la facturation. Pour en savoir plus, consultez la page Utilisation et facturation.
Copiez l'intégralité du code du tutoriel de cette page dans votre éditeur de texte.

Remplacez la valeur du paramètre key dans l'URL par votre propre clé API (celle que vous venez d'obtenir).

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

Enregistrez ce fichier avec un nom se terminant par .html, tel que index.html.
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.

Conseils et dépannage

Vous pouvez modifier des options comme le style et les propriétés afin de personnaliser la carte. Pour en savoir plus sur la personnalisation des cartes, consultez les guides de stylisation et de dessin sur la carte.
Utilisez la console des outils pour les développeurs dans votre navigateur Web pour tester et exécuter votre code, lire des rapports d'erreur et résoudre des problèmes concernant le code.
Utilisez les raccourcis clavier suivants pour ouvrir la console dans Chrome :
Cmd+Option+J (sous Mac) ou Ctrl+Maj+J (sous Windows).
Pour obtenir les coordonnées de latitude et de longitude d'un lieu sur Google Maps :
1. Ouvrez Google Maps dans un navigateur.
2. Faites un clic droit sur le lieu exact dont vous avez besoin des coordonnées.
3. Sélectionnez Plus d'infos sur cet endroit dans le menu contextuel qui s'affiche. La carte présente une fiche au bas de l'écran. Recherchez les coordonnées de latitude et de longitude dans la dernière ligne de la fiche.
Vous pouvez convertir une adresse en coordonnées de latitude et de longitude à l'aide du service Geocoding. Les guides du développeur expliquent en détail comment démarrer avec le service Geocoding.