Agregar un mapa de Google con un marcador a tu sitio web

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Introducción

En este instructivo, se muestra cómo agregar un mapa simple de Google Maps con un marcador a una página web. Se adapta a personas con conocimientos básicos o intermedios de HTML y CSS, y un poco de JavaScript. Si deseas obtener una guía avanzada para crear mapas, lee la guía para desarrolladores.

A continuación, se muestra el mapa que crearás con este instructivo. El marcador se ubica en Uluru (también conocido como Ayers Rock) en el Parque Nacional Uluru-Kata Tjuta.

En la siguiente sección, se muestra el código completo que necesitas para crear el mapa en este instructivo.

TypeScript

// Initialize and add the map
function initMap(): void {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;

CSS

/* Set the size of the div element that contains the map */
#map {
  height: 400px;
  /* The height is 400 pixels */
  width: 100%;
  /* The width is the width of the web page */
}

HTML

<html>
  <head>
    <title>Add Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>

Probar la muestra

Cómo comenzar

Para crear un mapa de Google Maps con un marcador en tu página web, sigue estos tres pasos:

  1. Cómo crear una página HTML
  2. Cómo agregar un mapa con un marcador
  3. Obtén una clave de API

Necesitas una navegador web. Elige uno conocido, como Google Chrome (recomendado), Firefox, Safari o Edge, según la plataforma de la lista de navegadores compatibles.

Paso 1: Crea una página HTML

Este es el código para una página web HTML básica:

<!DOCTYPE html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Add Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>

Ten en cuenta que esta es una página muy básica con un nivel de encabezado tres (h3) y un solo elemento div. Puedes agregar cualquier contenido a la página web.

Comprende el código

El siguiente código crea una página HTML que consiste en un encabezado y un cuerpo.

<html>
 <head>
 </head>
 <body>
 </body>
</html>

Puedes agregar un nivel de encabezado tres arriba del mapa con el siguiente código.

<h3>My Google Maps Demo</h3>

El siguiente código define un área de la página para tu mapa de Google.

<!--The div element for the map -->
<div id="map"></div>

En esta etapa del instructivo, div aparece como un bloque gris, ya que aún no agregaste un mapa. En el siguiente código, se describe el CSS que establece el tamaño y el color de div.

/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
/* Set the size of the div element that contains the map */
#map {
  height: 400px;
  /* The height is 400 pixels */
  width: 100%;
  /* The width is the width of the web page */
}

En el código anterior, el elemento style establece el tamaño div para tu mapa. Configura el ancho y la altura de div en más de 0 px para que el mapa sea visible. En este caso, la div se establece en una altura de 400 píxeles y un ancho del 100% para mostrar el ancho de tu página web.

Paso 2: Agrega un mapa con un marcador

En esta sección, se muestra cómo cargar la API de Maps JavaScript en tu página web y cómo escribir tu propio JavaScript que use la API para agregar un mapa con un marcador.

TypeScript

// Initialize and add the map
function initMap(): void {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;

CSS

/* Set the size of the div element that contains the map */
#map {
  height: 400px;
  /* The height is 400 pixels */
  width: 100%;
  /* The width is the width of the web page */
}

HTML

<html>
  <head>
    <title>Add Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>

Probar la muestra

Comprende el código

En el siguiente código, script carga la API desde la URL especificada.

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

En el código anterior, el parámetro callback ejecuta la función initMap después de que se carga la API. El atributo async permite que el navegador siga analizando el resto de la página mientras se carga la API. Una vez que se cargue, el navegador se detendrá y ejecutará la secuencia de comandos de inmediato. El parámetro key contiene tu clave de API.

Consulta el Paso 3: Obtén una clave de API a fin de obtener instrucciones para obtener tu propia clave de API más adelante.

El siguiente código contiene la función initMap que se inicializa y agrega el mapa cuando se carga la página web. Usa una etiqueta script para incluir tu propio JavaScript que contenga la función initMap.

  function initMap() {}

Agrega la función document.getElementById() para encontrar el mapa div en la página web.

El siguiente código construye un nuevo objeto de Google Maps y agrega propiedades al mapa, incluidos el centro y el nivel de zoom. Consulta la documentación para conocer otras opciones de propiedades.

TypeScript

// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(
  document.getElementById("map") as HTMLElement,
  {
    zoom: 4,
    center: uluru,
  }
);

JavaScript

// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: uluru,
});

En el código anterior, new google.maps.Map() crea un nuevo objeto de mapas de Google. La propiedad center le indica a la API dónde debe centrar el mapa.

Obtén más información acerca de cómo obtener coordenadas de latitud y longitud o convertir una dirección en coordenadas geográficas.

La propiedad zoom especifica el nivel de zoom del mapa. Zoom: 0 es el valor de zoom más bajo y muestra todo el planeta. Establece el valor de zoom más alto para acercar la Tierra a resoluciones más altas.

El siguiente código coloca un marcador en el mapa. La propiedad position establece la posición del marcador.

TypeScript

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  position: uluru,
  map: map,
});

JavaScript

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  position: uluru,
  map: map,
});

Obtén más información sobre los marcadores:

Paso 3: Obtener una clave de API

En esta sección, se explica cómo autenticar tu app en la API de Maps JavaScript con tu propia clave de API.

Sigue estos pasos para obtener una clave de API:

  1. Ve a Google Cloud Console.

  2. Crea o selecciona un proyecto.

  3. Haz clic en Continuar para habilitar la API y cualquier servicio relacionado.

  4. En la página Credenciales, obtén una clave de API (y configura sus restricciones). Nota: Si ya tienes una clave de API sin restricciones o una clave con restricciones de navegador, puedes usarla.

  5. Para evitar el robo de cuota y proteger tu clave de API, consulta Usa claves de API.

  6. Habilita la facturación. Consulta Uso y facturación para obtener más información.

  7. Copia el código completo de este instructivo de esta página en tu editor de texto.

  8. Reemplaza el valor del parámetro key en la URL por tu propia clave de API (esa es la clave de API que acabas de obtener).

    <script async
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
    

  9. Guarda este archivo con un nombre que termine en .html, como index.html.

  10. Para cargar el archivo HTML en un navegador web, arrástralo al escritorio. De manera alternativa, puedes hacer doble clic en el archivo en la mayoría de los sistemas operativos.

Sugerencias y solución de problemas

  • Puedes modificar opciones como el estilo y las propiedades para personalizar el mapa. Para obtener más información sobre la personalización de mapas, consulta las guías sobre el estilo y el dibujo en el mapa.
  • Usa la consola de Herramientas para desarrolladores en tu navegador web para probar y ejecutar tu código, leer informes de errores y resolver problemas con tu código.
  • Usa las siguientes combinaciones de teclas para abrir la consola en Chrome:
    Comando+Opción+J (en Mac) o Control+Mayúsculas+J (en Windows).
  • Sigue los pasos que se indican a continuación para obtener las coordenadas de latitud y longitud de una ubicación en Google Maps.

    1. Abre Google Maps en un navegador.
    2. Haz clic con el botón derecho en la ubicación exacta del mapa para el que necesitas las coordenadas.
    3. Selecciona What's here en el menú contextual que aparece. El mapa muestra una tarjeta en la parte inferior de la pantalla. Busca las coordenadas de latitud y longitud en la última fila de la tarjeta.
  • Puedes convertir una dirección en coordenadas de latitud y longitud mediante el servicio de geocodificación. Las guías para desarrolladores proporcionan información detallada sobre cómo comenzar a usar el servicio de geocodificación.