Ajouter une carte Google à une page Web

Vous pouvez ajouter une carte Google à une page Web à l'aide de code HTML, CSS ou JavaScript. Cette page explique comment ajouter une carte à une page Web de deux manières: à l'aide de l'élément HTML personnalisé gmp-map et d'un élément div.

Présentation

Pour que vous puissiez charger une carte, votre page Web doit effectuer les opérations suivantes:

  • Chargez l'API Maps JavaScript à l'aide d'un chargeur d'amorçage. C'est là que votre clé API est transmise et peut être ajoutée aux fichiers sources HTML ou JavaScript.
  • Ajoutez la carte à la page HTML et ajoutez les styles CSS nécessaires.
  • Chargez la bibliothèque maps et initialisez la carte.

Ajouter une carte à l'aide d'un élément gmp-map

L'élément gmp-map est un élément HTML personnalisé créé à l'aide de composants Web. Pour ajouter une carte à une page Web à l'aide d'un élément gmp-map, procédez comme suit.

  1. Sur la page HTML, ajoutez un élément script contenant l'amorçage configuré avec votre clé API et toute autre option. Dans l'exemple d'amorçage suivant, le paramètre callback a été omis, car il n'est pas nécessaire.

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

  2. Sur la page HTML, ajoutez un élément gmp-map. Spécifiez les coordonnées de latitude et de longitude de center, et une valeur de zoom pour zoom. Dans cet exemple, l'attribut de style height est également spécifié.

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

Exemple de code complet

<html>
  <head>
    <title>Add a Map 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="37.4220656,-122.0840897"
      zoom="10"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    ></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&v=beta"
      defer
    ></script>
  </body>
</html>
index.html

Ajouter une carte à l'aide d'un élément div et de JavaScript

L'élément div est toujours compatible avec le chargement de cartes. Pour ajouter une carte à une page Web à l'aide d'un élément div, procédez comme suit.

  1. Sur la page HTML, ajoutez un élément script contenant le chargeur d'amorçage configuré avec votre clé API et toute autre option. Vous pouvez également ajouter le code du chargeur d'amorçage directement à un fichier TypeScript ou JavaScript, sans les tags script.

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

  2. Sur la page HTML, ajoutez un élément div pour contenir la carte.

    <div id="map"></div>

  3. Dans le CSS, définissez la hauteur de la carte sur 100%.

    #map {
  height: 100%;
}

  4. Dans le fichier JavaScript, créez une fonction pour charger la bibliothèque maps et initialiser la carte. Spécifiez les coordonnées de latitude et de longitude de center, ainsi que le niveau de zoom à utiliser pour zoom.

let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

  map = new Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();
index.js

Exemple de code complet

TypeScript

let map: google.maps.Map;
async function initMap(): Promise<void> {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();
index.ts

JavaScript

let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

  map = new Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

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