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.

Descripción general

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

  • Carga la API de Maps JavaScript con un cargador de arranque. Aquí es donde se pasa tu clave de API. 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 Maps a una página web. Es un elemento HTML personalizado creado con componentes web. Para agregar un mapa a una página web con un elemento gmp-map, realiza los siguientes pasos.

  1. 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. 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 directa a una página HTML:

    <script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
    defer
></script>

    Más información para cargar la API de Google Maps JavaScript

  2. En la página HTML, agrega un elemento gmp-map. En center, especifica las coordenadas de latitud y longitud (obligatorio); en zoom, establece un valor de zoom (obligatorio) y, en map-id, ingresa un valor si es necesario (es obligatorio para algunas funciones, como los marcadores avanzados). El atributo height de CSS es obligatorio para que el mapa sea visible. Se puede especificar en HTML o CSS. En este ejemplo, el atributo de diseño height se especifica en el código HTML para mayor simplicidad.

    <gmp-map
    center="37.4220656,-122.0840897"
    zoom="10"
    map-id="DEMO_MAP_ID"
    style="height: 500px"></gmp-map>
    index.html

Ejemplo de código completo

<html>
    <head>
        <title>Add a Map using HTML</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly"
            defer></script>
    </head>
    <body>
        <gmp-map
            center="37.4220656,-122.0840897"
            zoom="10"
            map-id="DEMO_MAP_ID"
            style="height: 500px"></gmp-map>
    </body>
</html>
index.html

Cómo agregar un mapa con un elemento div (heredado) y JavaScript

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

  1. 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. 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 arranque dinámico 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>

    Más información para cargar la API de Google Maps JavaScript

  2. En la página HTML, agrega un elemento div para que contenga el mapa.

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

  3. En el archivo CSS, establece la altura del mapa en 100%. El atributo height de CSS es obligatorio para que el mapa sea visible.

    #map {
  height: 100%;
}

  4. En el archivo JavaScript, 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 map-id.

    let map;
async function initMap() {
    const { Map } = (await google.maps.importLibrary('maps'));
    map = new Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
    });
}
initMap();
    index.js

Ejemplo de código completo

TypeScript

let map: google.maps.Map;
async function initMap(): Promise<void> {
    const { Map } = (await google.maps.importLibrary(
        'maps'
    )) as google.maps.MapsLibrary;
    map = new Map(document.getElementById('map') as HTMLElement, {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
    });
}

initMap();
index.ts

JavaScript

let map;
async function initMap() {
    const { Map } = (await google.maps.importLibrary('maps'));
    map = new Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
    });
}
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>
    </head>
    <body>
        <div id="map"></div>

        <!-- 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>
</html>
index.html

Prueba la muestra

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 hacer esto variará según si usaste el elemento gmp-map o un elemento div.

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

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

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

Luego, establece propiedades en la instancia de 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 a partir de un elemento div

Cuando uses 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, configura las opciones en la instancia de map como se muestra aquí:

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