Cómo agregar un mapa de Google Maps con marcadores usando HTML

Introducción

Este instructivo te indica cómo usar HTML para agregar a una página web un mapa de Google Maps con un marcador. A continuación se muestra el mapa que crearás con este instructivo. Tiene dos marcadores posicionados, uno en Mountain View, California, y otro en Seattle, Washington.

Cómo comenzar

Para crear un mapa de Google Maps con un marcador usando HTML, tendrás que seguir estos pasos:

  1. Obtén una clave de API.
  2. Crea el código HTML, CSS y JS.
  3. Agrega un mapa.
  4. Agrega un marcador.

Necesitas un navegador web. De la lista de navegadores compatibles, elige uno conocido, como Google Chrome (recomendado), Firefox, Safari o Edge, según la plataforma que utilices.

Paso 1: Obtén 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 la consola de Google Cloud.

  2. Crea o selecciona un proyecto.

  3. Haz clic en Continuar para habilitar la API y los servicios relacionados.

  4. En la página Credenciales, obtén una clave de API (y configura sus restricciones). 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 Cómo usar las claves de API.

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

  7. Ya puedes usar tu clave de API.

Paso 2: Crea el código HTML, CSS y JS

A continuación se muestra el código de una página web HTML básica:

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

    <!-- TODO: Add bootstrap script tag. -->
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

Para cargar un mapa, tienes que agregar una etiqueta script que contenga el cargador de arranque de la API de Maps JavaScript, tal como se muestra en el siguiente fragmento (agrega tu propia clave de API):

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

Muestra anticipada: Prueba el código de muestra finalizado en JSFiddle.

Paso 3: Agrega un mapa

Para agregar a la página un mapa de Google Maps, copia el elemento HTML gmp-map y pégalo dentro de la etiqueta body de la página HTML:

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

El resultado de esa acción es el siguiente mapa:

El mapa que acabas de crear está centrado en el área metropolitana de San José.

Paso 4: Agrega un marcador

Para agregar un marcador al mapa, usa el elemento HTML gmp-advanced-marker. Copia el siguiente fragmento y pégalo sobre el elemento gmp-map completo que agregaste en el paso anterior.

<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

El código anterior agrega dos marcadores y cambia los parámetros zoom y center en el elemento gmp-map para mostrar de mejor manera esos marcadores. Se requiere un ID de mapa para usar Marcadores avanzados (puedes usar DEMO_MAP_ID si lo deseas).

Sugerencias y solución de problemas

  • Puedes aplicar al mapa un diseño personalizado.
  • Usa la consola de Herramientas para desarrolladores en tu navegador web para probar y ejecutar tu código, leer los informes de errores y resolver los problemas.
  • 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 la que necesitas las coordenadas.
    3. Selecciona ¿Qué hay aquí? en el menú contextual que aparece. El mapa mostrará 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 Geocoding. Las guías para desarrolladores brindan información detallada sobre cómo comenzar a usar el servicio Geocoding.

Código de muestra completo

A continuación se presenta el mapa final y el código de muestra completo que se utilizó en este instructivo.

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

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="43.4142989,-124.2301242"
      zoom="4"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    >
      <gmp-advanced-marker
        position="37.4220656,-122.0840897"
        title="Mountain View, CA"
      ></gmp-advanced-marker>
      <gmp-advanced-marker
        position="47.648994,-122.3503845"
        title="Seattle, WA"
      ></gmp-advanced-marker>
    </gmp-map>

    <!-- 
      The `defer` attribute causes the script 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. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=maps,marker&v=beta"
      defer
    ></script>
  </body>
</html>
index.html