Ajouter une carte Google avec un repère à l'aide de JavaScript

Introduction

Ce tutoriel explique comment ajouter une carte Google simple avec un repère à une page Web. Il est destiné aux personnes ayant un niveau de connaissance débutant ou intermédiaire en HTML et CSS, et quelques connaissances sur JavaScript.

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.

Comment en profiter ?

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

  1. Obtenir une clé API
  2. Créer une page HTML
  3. Ajouter une carte avec 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 du bootloader pour l'utiliser vous-même d'une page Web.

    <script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

Étape 2: 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>

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

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</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

À ce stade de l'exemple, nous obtenons:

  • Vous avez déclaré l'application au format HTML5 à l'aide de la déclaration !DOCTYPE html.
  • Un élément div nommé "map" a été créé. pour contenir la carte.
  • Chargement de l'API Maps JavaScript à l'aide du chargeur d'amorçage

Déclarer votre application au format HTML5

Nous vous recommandons de déclarer un vrai DOCTYPE dans votre application Web. Dans les exemples de cette page, nous avons déclaré nos applications au format HTML5 à l'aide de la propriété HTML5 DOCTYPE simple, comme illustré ci-dessous:

<!DOCTYPE html>

La plupart des navigateurs actuels affichent le contenu déclaré avec ce DOCTYPE en "mode standards" ce qui signifie que votre application doit être plus compatible avec plusieurs navigateurs. DOCTYPE est également conçu pour effectuer une dégradation élégante. les navigateurs qui ne le comprennent pas l'ignorent et utilisent le mode "quirks" à d'afficher leur contenu.

Notez que certains CSS qui fonctionnent en mode quirks ne sont pas valides en mode standards. Plus précisément, toutes les tailles basées sur des pourcentages doivent hériter des éléments de bloc parents, et si l'un des ancêtres ne spécifie aucune taille, elle est définie sur 0 x 0 pixel. Pour Pour cette raison, nous incluons la déclaration style suivante:

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

Créer un élément div

Pour que la carte s'affiche sur une page Web, vous devez lui réserver un espace. En général, Pour ce faire, nous créons un élément div nommé et obtenons une référence à ce dans le Document Object Model (DOM) du navigateur.

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.

/* 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. Notez que les div prennent généralement leur largeur à partir de leur élément conteneur, et les divisions vides ont généralement une hauteur de 0. Pour cette vous devez toujours définir explicitement la hauteur de div.

Charger l'API Maps JavaScript

Le chargeur d'amorçage prépare l'API Maps JavaScript pour le chargement (aucune bibliothèque n'est chargée tant que importLibrary() n'est pas appelé).

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

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

Étape 3: 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
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();
index.ts

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();
index.js

Dans le code ci-dessus, les bibliothèques Map et AdvancedMarkerView sont chargées lorsque la fonction initMap() est appelée.

Comprendre le code

À ce stade du tutoriel, nous avons les éléments suivants:

  • Vous avez défini une fonction JavaScript qui crée un mappage dans l'élément div.
  • Création d'un AdvancedMarkerElement pour ajouter un repère à la carte.

Ajouter une carte

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 position = { lat: -25.344, lng: 131.031 };

// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

// The map, centered at Uluru
map = new Map(
  document.getElementById('map') as HTMLElement,
  {
    zoom: 4,
    center: position,
    mapId: 'DEMO_MAP_ID',
  }
);
index.ts

JavaScript

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

// The map, centered at Uluru
map = new Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
  mapId: "DEMO_MAP_ID",
});

index.js

Deux options sont obligatoires pour chaque carte: center et zoom. Dans l'exemple ci-dessus, , new Map() crée un objet Google Maps. La propriété center indique à l'API où centrer la carte.

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.

Offrir une carte de la Terre entière sous la forme d'une seule image nécessiterait soit une carte immense ou une petite carte à très faible résolution. Par conséquent, les images de carte dans Google Maps et dans l'API Maps JavaScript sont divisés en "tuiles" de carte et les "niveaux de zoom". Aux niveaux de zoom faibles, un petit ensemble de tuiles de carte couvre un large domaine ; à des niveaux de zoom plus élevés, les tuiles ont une résolution supérieure et couvrent plus petite. La liste suivante indique le niveau de détail approximatif que vous pouvez vous attendez à voir à chaque niveau de zoom:

  • 1 : Le monde
  • 5: La masse continentale ou le continent
  • 10 : La ville
  • 15 : Les rues
  • 20 : Les bâtiments

Les trois images suivantes montrent la même vue de Tokyo aux niveaux de zoom 0, 7 et 18.

Ajouter un repère

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 AdvancedMarkerElement({
  map: map,
  position: position,
  title: 'Uluru'
});
index.ts

JavaScript

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: "Uluru",
});
index.js

Exemple de code complet

Voici l'exemple de code complet:

TypeScript

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();
index.ts

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

style.css

HTML

<html>
  <head>
    <title>Add Map</title>

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

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>
index.html

Essayer avec un exemple

En savoir plus sur les repères :

Conseils et dépannage

  • En savoir plus sur l'obtention des coordonnées de latitude/longitude ou convertir une adresse en coordonnées géographiques.
  • 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.