Cómo agregar un mapa de Google Maps a una página web

Puedes agregar un mapa de Google Maps a una página web usando código HTML, CSS y JavaScript. En esta página, se muestra cómo agregar un mapa a una página web y, luego, acceder de forma programática a la instancia del mapa.

Cómo agregar un mapa con un elemento gmp-map
Cómo agregar un mapa con un elemento div y JavaScript
Cómo establecer y obtener propiedades en la instancia del mapa

Descripción general

Para cargar un mapa, tu página web debe hacer lo siguiente:

Cargar la API de Maps JavaScript con un cargador de arranque. (es donde se pasa tu clave de API) (además de que se puede agregar a los archivos fuente HTML o JavaScript)
Agregar el mapa a la página HTML y establecer los diseños de CSS necesarios
Cargar la biblioteca maps y luego inicializar el mapa

Cómo agregar un mapa con un elemento `gmp-map`

El elemento gmp-map es la forma preferida de agregar un mapa de Google a una página web. Es un elemento HTML personalizado y creado con componentes web. Para agregar un mapa a una página web con un elemento gmp-map, realiza los siguientes pasos.

Agrega un elemento script que contenga el cargador de arranque a una página HTML o agrégalo a un archivo fuente de JavaScript o TypeScript sin el elemento script. Configura el cargador de arranque con tu clave de API y cualquier otra opción necesaria. Puedes elegir entre la importación dinámica de bibliotecas o la carga directa de secuencias de comandos. En este ejemplo, se muestra cómo agregar el cargador de arranque de carga de secuencias de comandos dinámicas a una página 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>

Obtén más información para cargar la API de Maps JavaScript

En la página HTML, agrega un elemento gmp-map. En center (obligatorio), especifica las coordenadas de latitud y longitud; a su vez, en zoom (obligatorio), establece un valor de zoom. Si es necesario, agrega un map-id (es obligatorio para algunas funciones, como los marcadores avanzados).

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

Ejemplo de código completo

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

Prueba la muestra

JSFiddle.net

Cómo agregar un mapa con un elemento `div` y JavaScript

Para agregar un mapa a una página web con un elemento div, realiza los siguientes pasos.

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

Obtén más información para cargar la API de Maps JavaScript

En la página HTML, agrega un elemento div para que contenga el mapa.
```
<div id="map"></div>
```
En el archivo CSS, establece la altura del mapa en 100%. El atributo CSS height es obligatorio para que el mapa sea visible.
```
#map {
  height: 100%;
}
```

En el archivo JS o TS, crea una función para cargar la biblioteca maps y luego inicializar el mapa. En center, especifica las coordenadas de latitud y longitud; a su vez, en zoom, establece un nivel de zoom. Si es necesario, agrega un ID de mapa con la propiedad mapId. Dado que el mapa se establecerá de forma predeterminada en ráster, solicita un mapa vectorial especificando la opción de mapa "VECTOR". Se recomienda el tipo de mapa vectorial para obtener la mejor experiencia del usuario, ya que proporciona una fidelidad visual mejorada, así como la capacidad de controlar la inclinación y la orientación en el mapa.

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

Consulta el ejemplo de código fuente completo

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

Prueba la muestra

JSFiddle.net

Cómo establecer y obtener propiedades en la instancia del mapa

Para interactuar con la instancia del mapa, selecciona el elemento contenedor. El código para hacerlo variará según si usaste el elemento gmp-map o un elemento div.

Cómo obtener una instancia del mapa de un elemento `gmp-map`

Para obtener la instancia del mapa cuando usas un elemento gmp-map, usa document.querySelector para recuperar una instancia mapElement, como se muestra aquí.

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

Luego, establece propiedades en la instancia mapElement:

mapElement.zoom = 8;

La clase MapElement usa la clase Map de forma interna. Accede a la clase Map con la propiedad MapElement.innerMap, como se muestra aquí:

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

Cómo obtener una instancia del mapa de un elemento `div`

Cuando usas un elemento div, obtén la instancia del mapa y establece opciones en el momento de la inicialización:

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

Después de la inicialización, establece opciones en la instancia map, como se muestra aquí:

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

Cómo agregar un mapa de Google Maps a una página web Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Descripción general

Cómo agregar un mapa con un elemento gmp-map

Ejemplo de código completo

TypeScript

JavaScript

CSS

HTML

Prueba la muestra

Cómo agregar un mapa con un elemento div y JavaScript

TypeScript

JavaScript

Consulta el ejemplo de código fuente completo

TypeScript

JavaScript

CSS

HTML

Prueba la muestra

Cómo establecer y obtener propiedades en la instancia del mapa

Cómo obtener una instancia del mapa de un elemento gmp-map

Cómo obtener una instancia del mapa de un elemento div

Cómo agregar un mapa de Google Maps a una página web

Cómo agregar un mapa con un elemento `gmp-map`

Cómo agregar un mapa con un elemento `div` y JavaScript

Cómo obtener una instancia del mapa de un elemento `gmp-map`

Cómo obtener una instancia del mapa de un elemento `div`