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

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 :

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 entre l'importation dynamique de la bibliothèque ou le chargement direct du script. Cet exemple montre comment ajouter l'amorçage de chargement de script 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>

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

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 comme les repères avancés).

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

Exemple de code complet

TypeScript

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

    // Create the map.
    const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;
}

initMap();index.ts

JavaScript

async function initMap() {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');
    // Create the map.
    const mapElement = document.querySelector('gmp-map');
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;
}
initMap();index.js

CSS

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

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- 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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly" });</script>
    </head>

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

Essayer l'exemple

JSFiddle.net

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 :

<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

Sur la page HTML, ajoutez un élément div qui contiendra la carte.
```
<div id="map"></div>
```
Dans le CSS, définissez la hauteur de la carte sur 100%. L'attribut CSS height est obligatoire pour que la carte soit visible.
```
#map {
  height: 100%;
}
```

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

TypeScript

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

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

initMap();index.ts

JavaScript

let map;
async function initMap() {
    // Import the needed libraries
    const { Map, RenderingType } = (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",
    });
}
initMap();index.js

Afficher l'exemple de code source complet

TypeScript

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

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

initMap();index.ts

JavaScript

let map;
async function initMap() {
    // Import the needed libraries
    const { Map, RenderingType } = (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",
    });
}
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>

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

    <!-- 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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly" });</script>
    </body>
</head>

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

</html>index.html

Essayer l'exemple

JSFiddle.net

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 à utiliser 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 gmp-map élément, utilisez document.querySelector pour récupérer une mapElement instance, comme indiqué ci-dessous.

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

Définissez ensuite 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é ci-dessous :

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

Ajouter une carte Google à une page Web Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Présentation

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

Exemple de code complet

TypeScript

JavaScript

CSS

HTML

Essayer l'exemple

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

TypeScript

JavaScript

Afficher l'exemple de code source complet

TypeScript

JavaScript

CSS

HTML

Essayer l'exemple

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

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

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

Ajouter une carte Google à une page Web

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

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

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

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