Ajouter une carte Google comportant des repères avec du HTML

Introduction

Ce tutoriel explique comment ajouter une carte Google comportant un repère à une page Web avec du code HTML. Voici la carte que vous allez créer à l'aide de ce tutoriel. Deux repères sont positionnés : un à Mountain View (Californie), l'autre à Seattle (Washington).

Premiers pas

Voici les étapes à suivre pour créer une carte Google comportant un repère avec du code HTML :

  1. Obtenir une clé API
  2. Créer des éléments HTML, CSS et JS
  3. Ajouter une carte
  4. Ajouter un repère

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 : 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 :

  1. Accédez à la console Google Cloud.

  2. Créez ou sélectionnez un projet.

  3. Cliquez sur Continuer pour activer l'API et les services connexes.

  4. 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.

  5. Pour éviter le vol de quotas et sécuriser votre clé API, consultez Utiliser des clés API.

  6. Activez la facturation. Pour en savoir plus, consultez la page Utilisation et facturation.

  7. Une fois que vous disposez d'une clé API, ajoutez-la à l'extrait suivant en cliquant sur "YOUR_API_KEY". Copiez et collez le tag de script d'amorçage à utiliser sur votre propre page Web.

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

Étape 2 : Créez des éléments HTML, CSS et JS

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

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>

    <!-- TODO: Add bootstrap script tag. -->
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

Pour charger une carte, vous devez ajouter un tag de script contenant le chargeur d'amorçage pour l'API Maps JavaScript, comme indiqué dans l'extrait suivant (ajoutez votre propre clé API) :

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

Attention spoiler : Testez l'exemple terminé sur JSFiddle.

Étape 3 : Ajoutez une carte

Pour ajouter une carte Google à la page, copiez l'élément HTML gmp-map et collez-le dans le body de la page HTML :

<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

Cela génère la carte suivante :

La carte que vous venez de créer est centrée sur l'agglomération de San Jose.

Étape 4 : Ajoutez un repère

Pour ajouter un repère à la carte, utilisez l'élément HTML gmp-advanced-marker. Copiez l'extrait suivant, puis collez-le sur l'élément gmp-map complet ajouté à l'étape précédente.

<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

Le code précédent ajoute deux repères et modifie les paramètres zoom et center sur gmp-map afin de mieux afficher ces repères. Un ID de carte est requis pour utiliser les Repères avancés (vous pouvez choisir DEMO_MAP_ID).

Conseils et dépannage

  • Vous pouvez personnaliser la carte avec un style personnalisé.
  • 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 les 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.

Exemple de code complet

Vous trouverez ci-dessous la carte définitive et l'exemple de code complet utilisé pour ce tutoriel.

<html>
  <head>
    <title>Add a Map with Markers using HTML</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>
    <gmp-map
      center="43.4142989,-124.2301242"
      zoom="4"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    >
      <gmp-advanced-marker
        position="37.4220656,-122.0840897"
        title="Mountain View, CA"
      ></gmp-advanced-marker>
      <gmp-advanced-marker
        position="47.648994,-122.3503845"
        title="Seattle, WA"
      ></gmp-advanced-marker>
    </gmp-map>

    <!-- 
      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.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=beta"
      defer
    ></script>
  </body>
</html>
index.html