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 à l'aide d'un élément gmp-map
• Ajouter une carte à l'aide d'un élément div et de 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 et peut être ajoutée aux fichiers source HTML ou JavaScript) Il peut être ajouté aux fichiers sources HTML ou JavaScript.
• Ajoutez la carte à la page HTML et ajoutez les styles CSS nécessaires.
• Charger la bibliothèque maps et initialiser la carte

L'élément gmp-map est la méthode recommandée pour ajouter une carte Google à une page Web.

L'élément gmp-map est la méthode préféré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 à une page web à l'aide d'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 le bootstrap avec votre clé API et toute autre option. Cet exemple montre comment ajouter l'amorçage de chargement de script dynamique à une page HTML : Cet exemple montre comment ajouter le script de chargement dynamique de l'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>

   En savoir plus sur le chargement de l'API Maps JavaScript de Google Maps

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 (il est obligatoire pour certaines fonctionnalités comme les repères avancés).

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

TypeScript

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" mapId="DEMO_MAP_ID">
        </gmp-map>
    </body>
</html>
index.html

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

Pour ajouter une carte à une page Web à l'aide d'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 le bootstrap avec votre clé API et toute autre option. Cet exemple montre comment ajouter l'amorçage dynamique à une page HTML : Cet exemple montre comment ajouter le bootstrap 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>

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

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 html, body, et #map à 100%. La propriété CSS height est requise pour que la carte soit visible, car les éléments div vides ont une hauteur par défaut de 0. Étant donné que les hauteurs basées sur des pourcentages se répercutent depuis les éléments parents en mode strict, définir height: 100% sur html et body ainsi que #map garantit une chaîne ininterrompue d'héritage de hauteur depuis la fenêtre d'affichage jusqu'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. Étant donné que la carte sera raster 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 et permet de contrôler l'inclinaison et la direction sur la carte.mapId Étant donné que la carte utilise par défaut le mode raster, demandez une carte vectorielle en spécifiant l'option de carte "VECTOR". Le type de carte vectorielle est recommandé pour une meilleure expérience utilisateur, car il offre une fidélité visuelle améliorée ainsi que la possibilité de contrôler l'inclinaison et le cap 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

Pour interagir avec l'instance de carte, sélectionnez l'élément conteneur.

Le code à utiliser varie selon que vous avez utilisé l'élément `gmp-map` ou un élément `div`. Le code pour faire cela varie selon que vous avez utilisé l'élément gmp-map ou un élément div.

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.

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é ici.

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

Ensuite, définissez les propriétés sur 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,
});

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

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

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,
});