Ajouter une carte Google à une page Web

Vous pouvez ajouter une carte Google sur une page Web avec du code HTML, CSS et JavaScript. Cette page explique comment ajouter une carte à une page Web, puis accéder à l'instance de carte de manière programmatique.

• Ajouter une carte en utilisant un élément gmp-map
• Ajouter une carte en utilisant un élément div et JavaScript
• Définir et obtenir des propriétés sur l'instance de carte

Présentation

Pour charger une carte, votre page Web doit réaliser les actions suivantes :

• Charger l'API Maps JavaScript avec un chargeur d'amorçage C'est là que votre clé API est transmise. Elle peut être ajoutée aux fichiers source HTML ou JavaScript.
• Ajouter la carte sur la page HTML ainsi que les styles CSS requis
• Charger la bibliothèque maps et initialiser la carte

Ajouter une carte en utilisant un élément gmp-map

L'élément gmp-map est la méthode recommandée pour ajouter une carte Google à une page Web. Il s'agit d'un élément HTML personnalisé créé à l'aide de composants Web. Pour ajouter une carte sur une page Web avec un élément gmp-map, procédez comme suit :

1. Ajoutez un élément script contenant l'amorçage à une page HTML, ou ajoutez-le à un fichier source JavaScript ou TypeScript sans l'élément script. Configurez l'amorçage avec votre clé API et les autres options éventuelles. Vous pouvez choisir l'importation de bibliothèque dynamique ou le chargement direct de script. Cet exemple montre comment ajouter le chargement dynamique du script d'amorçage à une page HTML :

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

   Découvrez comment charger l'API Google Maps JavaScript.

2. Sur la page HTML, ajoutez un élément gmp-map. Spécifiez les coordonnées de latitude et de longitude pour center (obligatoire), une valeur de zoom pour zoom (obligatoire) et un map-id si nécessaire (obligatoire pour certaines fonctionnalités telles que les repères avancés).

<gmp-map center="-34.397,150.644" zoom="8" map-id="DEMO_MAP_ID">
</gmp-map>
index.html

Exemple de code complet

async function init(): Promise<void> {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');

    // Access the map.
    const mapElement = document.querySelector('gmp-map')!;
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;

    console.log({ mapElement, innerMap });
}

void init();
index.ts

async function init() {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');

    // Access the map.
    const mapElement = document.querySelector('gmp-map');
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;

    console.log({ mapElement, innerMap });
}

void init();
index.js

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

<html>
    <head>
        <title>Simple Map</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>

    <body>
        <gmp-map center="-34.397,150.644" zoom="8" map-id="DEMO_MAP_ID">
        </gmp-map>
    </body>
</html>
index.html

Ajouter une carte en utilisant un élément div et JavaScript

Pour ajouter une carte sur une page Web avec un élément div, procédez comme suit :

1. Ajoutez un élément script contenant l'amorçage à une page HTML, ou ajoutez-le à un fichier source JavaScript ou TypeScript sans l'élément script. Configurez l'amorçage avec votre clé API et les autres options éventuelles. Vous pouvez choisir l'importation de bibliothèque dynamique ou le chargement direct de script. Cet exemple montre comment ajouter l'amorçage dynamique à une page HTML :

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

   Découvrez comment charger l'API Google Maps JavaScript.

2. Sur la page HTML, ajoutez un élément div qui contiendra la carte.

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

3. Dans le CSS, définissez la hauteur de html, body et #map sur 100%. La propriété CSS height est requise pour que la carte soit visible, car les éléments div vides ont par défaut une hauteur de 0. Étant donné que les hauteurs basées sur un pourcentage sont héritées des éléments parents en mode strict, définir height: 100% sur html et body ainsi que sur #map garantit une chaîne ininterrompue d'héritage de la hauteur, de la fenêtre d'affichage au conteneur de la carte, dans tous les navigateurs.

   html,
   body,
   #map {
     height: 100%;
     margin: 0;
     padding: 0;
   }

4. Dans le fichier JS ou TS, créez une fonction pour charger la bibliothèque maps et initialiser la carte. Spécifiez les coordonnées de latitude et de longitude pour center, et le niveau de zoom à utiliser pour zoom. Si nécessaire, ajoutez un ID de carte à l'aide de la propriété mapId. Étant donné que la carte est matricielle par défaut, demandez une carte vectorielle en spécifiant l'option de carte "VECTOR". Le type de carte vectorielle est recommandé pour une expérience utilisateur optimale, car il offre une meilleure fidélité visuelle, ainsi que la possibilité de contrôler l'inclinaison et l'orientation sur la carte.

   TypeScript

   let map: google.maps.Map;
   async function init(): Promise<void> {
       // Import the needed libraries
       const { Map } = await google.maps.importLibrary('maps');
   
       // Create a new map from the div with id="map".
       map = new Map(document.getElementById('map')!, {
           center: { lat: -34.397, lng: 150.644 },
           zoom: 8,
           renderingType: 'VECTOR',
       });
   
       console.log(map);
   }
   
   void init();
   index.ts

   JavaScript

   let map;
   async function init() {
       // Import the needed libraries
       const { Map } = await google.maps.importLibrary('maps');
   
       // Create a new map from the div with id="map".
       map = new Map(document.getElementById('map'), {
           center: { lat: -34.397, lng: 150.644 },
           zoom: 8,
           renderingType: 'VECTOR',
       });
   
       console.log(map);
   }
   
   void init();
   index.js

let map: google.maps.Map;
async function init(): Promise<void> {
    // Import the needed libraries
    const { Map } = await google.maps.importLibrary('maps');

    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map')!, {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: 'VECTOR',
    });

    console.log(map);
}

void init();
index.ts

let map;
async function init() {
    // Import the needed libraries
    const { Map } = await google.maps.importLibrary('maps');

    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: 'VECTOR',
    });

    console.log(map);
}

void init();
index.js

/* 
 * 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>
    <head>
        <title>Simple Map</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>

        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY" 
            });
        </script>
    </head>

    <body>
        <div id="map"></div>
    </body>
</html>
index.html

Définir et obtenir des propriétés sur l'instance de carte

Pour interagir avec l'instance de carte, sélectionnez l'élément conteneur. Le code permettant d'effectuer cette opération varie selon que vous avez utilisé l'élément gmp-map ou un élément div.

Obtenir une instance de carte à partir d'un élément gmp-map

Pour obtenir l'instance de carte lorsque vous utilisez un élément gmp-map, utilisez document.querySelector pour récupérer une instance mapElement, comme indiqué ci-dessous.

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

Définissez ensuite les propriétés de l'instance mapElement :

mapElement.zoom = 8;

La classe MapElement utilise la classe Map en interne. Accédez à la classe Map à l'aide de la propriété MapElement.innerMap, comme indiqué ici :

mapElement.innerMap.setOptions({
    mapTypeControl: false,
});

Obtenir une instance de carte à partir d'un élément div

Lorsque vous utilisez un élément div, obtenez l'instance de carte et définissez les options au moment de l'initialisation :

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

Après l'initialisation, définissez les options sur l'instance map comme indiqué ci-dessous :

map.setOptions({
    zoom: 8,
});