Cómo integrar y personalizar Google Maps en tu Sitio Web

Incluir mapas interactivos en tu sitio web puede mejorar significativamente la experiencia del usuario y proporcionar información geográfica útil. Para ello Google Maps Platform permite integrar mapas personalizados en tus aplicaciones web de manera sencilla.

Google Maps API

El API de Google Maps proporciona herramientas para añadir mapas interactivos, además de mostrar: marcadores, rutas, geocodificación y personalización de mapas, ofreciendo una experiencia de usuario enriquecida.

Existes diversos tipos de productos con diferentes cualidades, como ejemplo usaremos:

Producto	Descripción
Maps Embed API $0 x uso ilimitado	Integración básica, acepta poca personalización, se usa HTML para configurarlo.
Maps JavaScript API $7 x 1000 solicitudes	Integración con muchas opciones de personalización, se usa JavaScript para configurarlo.

API Key

Para utilizar Google Maps, necesitas una API Key, esta clave sirve para poder usar los servicios. Para crear un API Key debes seguir los siguientes pasos:

Ingresa a Google Cloud Console.
Crea un Proyecto o selecciona uno existente.
Accede a la sección APIs & Services y habilita los servicios que necesitas.
Accede al producto Google Maps Platform
Selecciona Keys & Credentials y crea tus credenciales y copia tu API Key.

Maps Embed API

Google Maps Embed API permite incluir un mapa utilizando un iframe donde API_KEY es tu key generado previamente.


<iframe
  width="450"
  height="250"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=API_KEY&PARAMETERS"
  allowfullscreen>
</iframe>

Entre los parámetros disponibles tenemos:

q: Nombre del lugar o dirección que se quiere mostrar, en formato URL.
center: Define latitud y longitud para centrar el mapa.
zoom: Nivel de acercamiento del mapa, rango de 0 hasta 21.
maptype: Tipo de mapa a usar: roadmap (default) o satelite.
language: Define el idioma del mapa (es, en, etc)

Luego podemos crear un ejemplo:


<iframe
  width="860"
  height="420"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=Hospital%20Cayetano%20Heredia&zoom=15&language=es"
  allowfullscreen>
</iframe>

Maps JavaScript API

Importar librería

Para usar Maps JavaScript API se debe agregar la librería JavaScript, donde initMap es la función javaScript que se ejecutará automáticamente al cargar la librería.


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

Crear Mapa con JavaScript

Lo siguiente es agregar un <div> donde vamos a mostrar el mapa, podemos agregar estilos para definir sus dimensiones:


<div id="map"></div>
<style>#map { width: 640px; height: 420px; }</style>

Finalmente agregar el código JavaScript para mostrar el mapa, donde usamos la clase Map que recibe como parámetros el elemento donde se va a mostrar el mapa y opciones adicionales (center, zoom, etc) y un identificador interno para el mapa mapId.


let map;

async function initMap() {
  const {Map} = await google.maps.importLibrary("maps");

  map = new Map(document.getElementById("map"), {
    center: {lat: -12.01761, lng: -77.0494505},
    zoom: 16,
    mapId: "custom-map-id",
  });
}

Agregar marcador

Con Maps JavaScript API se pueden agregar marcadores personalizados (ubicación y texto). Para agregar un marcador se usa la clase AdvancedMarkerElement y también usaremos InfoWindow para mostrar una ventana informativa al hacer click en el marcador.


let map;

async function initMap() {
  const {Map, InfoWindow} = await google.maps.importLibrary("maps");
  const {AdvancedMarkerElement} = await google.maps.importLibrary("marker");
  const infoWindow = new InfoWindow();

  // create map
  map = new Map(document.getElementById("map"), {
    center: {lat: -12.01761, lng: -77.0494505},
    zoom: 16,
    mapId: "custom-map-id",
  });

  // create marker
  const marker = new AdvancedMarkerElement({
    map,
    position: {lat: -12.01761, lng: -77.0494505},
    title: "Descripción de la ubicación",
    gmpClickable: true,
  });

  // show info-window 
  marker.addListener("click", ({domEvent, latLng}) => {
    const {target} = domEvent;
    infoWindow.setContent(marker.title);
    infoWindow.open(marker.map, marker);
  });
}

Uniendo todo el código previo tenemos el ejemplo completo:


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Maps JavaScript API</title>
    <style>#map { width: 640px; height: 420px; }</style>
</head>
<body>
<h1>Maps JavaScript API</h1>
<div id="map"></div>
<script>
let map;

async function initMap() {
  const {Map, InfoWindow} = await google.maps.importLibrary("maps");
  const {AdvancedMarkerElement} = await google.maps.importLibrary("marker");
  const infoWindow = new InfoWindow();

  // create map
  map = new Map(document.getElementById("map"), {
    center: {lat: -12.01761, lng: -77.0494505},
    zoom: 16,
    mapId: "custom-map-id",
  });

  // create marker
  const marker = new AdvancedMarkerElement({
    map,
    position: {lat: -12.01761, lng: -77.0494505},
    title: "Descripción de la ubicación",
    gmpClickable: true,
  });

  // show info-window 
  marker.addListener("click", ({domEvent, latLng}) => {
    const {target} = domEvent;
    infoWindow.setContent(marker.title);
    infoWindow.open(marker.map, marker);
  });
}
</script>
<script
  src="https://maps.googleapis.com/maps/api/js?key=API_KEY&loading=async&callback=initMap" defer>
</script>
</body>
</html>

Consideraciones

Restringe el uso de tu API Key para prevenir su uso no autorizado. Puedes restringir por dominios HTTP referidos, direcciones IP, y más.

Accede a Google Cloud Console.
Selecciona APIs & Services y luego Credentials.
Edita tu API Key y añade las restricciones necesarias.

Ten en cuenta que el servicio Maps JavaScript API tiene un costo de $ 7.00 por cada 1000 solicitudes por lo que es importante que tus API Keys se usen sólo en las direcciones que tu necesitas.

Conclusión

Integrar Google Maps en tu sitio web es un proceso sencillo, pero requiere los servicios y precios que ofrecen. Obtener y restringir adecuadamente tu API Key es importante para no incurrir en gastos inesperados.