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.

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) Ajouter la carte sur la page HTML ainsi que les styles CSS requis
  • Charger la bibliothèque `maps` et initialiser la carte
  • 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. Vous pouvez choisir d'importer la bibliothèque de manière dynamique ou de charger le script directement. Cet exemple montre comment ajouter l'amorçage de chargement de script dynamique à une page HTML : En savoir plus sur le chargement de l'API Google Maps JavaScript

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

  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>

TypeScript

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();

JavaScript

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();

CSS

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

**Remarque sur l'optimisation interne des performances** :

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

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. Vous pouvez choisir d'importer la bibliothèque de manière dynamique ou de charger le script directement. Cet exemple montre comment ajouter l'amorçage dynamique à une page HTML : En savoir plus sur le chargement de l'API Google Maps JavaScript

    <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

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

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

  3. L'attribut CSS `height` est obligatoire pour que la carte soit visible. L'attribut CSS height est requis pour que la carte soit visible.

    #map {
  height: 100%;
}

  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();

    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();

Afficher l'exemple de code source complet

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();

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();

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

**Remarque sur l'optimisation interne des performances** :

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

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 :

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

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