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 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 y 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 a un archivo de código 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 bootstrap 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>

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

2. En la página HTML, agrega un elemento gmp-map. Especifica las coordenadas de latitud y longitud para center (obligatorio), un valor de zoom para zoom (obligatorio) y un map-id si es necesario (es obligatorio para algunas funciones, como los marcadores avanzados).

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

Ejemplo de código completo

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

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.

1. Agrega un elemento script que contenga el cargador de arranque a una página HTML o a un archivo de código 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 bootstrap 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 de html, body y #map en 100%. La propiedad height de CSS es obligatoria para que el mapa sea visible, ya que los elementos div vacíos tienen una altura predeterminada de 0. Dado que las alturas basadas en porcentajes se heredan en cascada desde los elementos superiores en el modo estricto, establecer height: 100% en html y body, así como en #map, garantiza una cadena ininterrumpida de herencia de altura desde el viewport hasta el contenedor del mapa en todos los navegadores.

   html,
   body,
   #map {
     height: 100%;
     margin: 0;
     padding: 0;
   }

4. 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 como de trama, solicita un mapa de vectores especificando la opción de mapa "VECTOR". Se recomienda el tipo de mapa de vectores 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 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

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.

Obtén una instancia de mapa a partir de un elemento gmp-map

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

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

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

Obtén una instancia de mapa a partir de un elemento div

Cuando uses un elemento div, obtén la instancia del mapa y establece las 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 a continuación:

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