🗺️ Cómo Integrar Google Maps en Next.js con Múltiples Marcadores

¿Te gustaría mostrar mapas interactivos en tu aplicación web con la potencia de Google Maps?

En este tutorial aprenderás a integrar Google Maps en Next.js, agregar marcadores personalizados y controlar diversas opciones del mapa.

Vamos paso a paso, desde instalar la librería oficial hasta mostrar múltiples ubicaciones como San Francisco, Nueva York y Los Ángeles.

🚀 ¿Qué aprenderás?

• Cómo crear un proyecto con Next.js.
• Cómo obtener y usar tu API Key de Google Maps.
• Cómo mostrar un mapa con marcadores.
• Cómo personalizar las opciones del mapa.
• Cómo trabajar con múltiples ubicaciones.

🧰 Requisitos

• Tener Node.js y npm instalados.
• Conocimientos básicos de React y Next.js.

⚙️ Configuración Inicial

1. Crea un proyecto en Next.js

Si aún no tienes un proyecto creado, puedes generarlo con el siguiente comando:

npx create-next-app@latest my-maps-app
cd my-maps-app

Luego, instala la librería oficial de Google Maps para JavaScript:

npm install @googlemaps/js-api-loader

2. Consigue una API Key de Google Maps

Dirígete al siguiente enlace para generar una clave de API de Google Maps:

🔗 Google Maps Platform

Sigue las instrucciones para crear un proyecto, habilitar la API de Maps y obtener tu clave. Al final, tendrás una API Key parecida a esta:

AIzaSyAmPliSyOVU6Ufgp3Oyy8DNcDMvfCUiReM

📌 Asegúrate de restringir el uso de tu API Key por seguridad.

3. Agrega la clave a tus variables de entorno

Crea un archivo .env.local en la raíz del proyecto y añade tu API Key:

NEXT_PUBLIC_MAPS_API_KEY=AIzaSyAmPliSyOVU6Ufgp3Oyy8DNcDMvfCUiReM

🧠 El prefijo NEXT_PUBLIC_ es necesario para que la variable esté disponible en el cliente (frontend).

Una vez hecho esto, ya estás listo para renderizar el mapa con Google Maps en tu aplicación Next.js. 🎉

🗺️ Mostrar un Mapa con un Marcador

Ahora que ya tienes tu API Key configurada, es momento de mostrar el mapa.

Vamos a crear un componente que:

1. Cargue el mapa usando @googlemaps/js-api-loader.
2. Centre el mapa en una ubicación.
3. Coloque un marcador en el centro del mapa.

📄 Componente GoogleMaps.tsx

"use client";

import { useEffect, useRef } from "react";
import { Loader } from "@googlemaps/js-api-loader";

function GoogleMaps() {
  // Referencia al div donde se renderizará el mapa
  const mapRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const initMap = async () => {
      // Cargar la librería de Google Maps
      const loader = new Loader({
        apiKey: process.env.NEXT_PUBLIC_MAPS_API_KEY as string,
        version: "quarterly",
        libraries: ["places"],
      });

      // Importar la clase Map
      const { Map } = await loader.importLibrary("maps");

      // Ubicación central del mapa (San Francisco)
      const location = {
        lat: 37.774929,
        lng: -122.419418,
      };

      // Opciones de configuración del mapa
      const options: google.maps.MapOptions = {
        center: location,
        zoom: 15,
        mapId: "map", // Puedes configurar este ID desde Google Cloud Console
      };

      // Crear el mapa dentro del div referenciado
      const map = new Map(mapRef.current as HTMLElement, options);

      // Importar y añadir un marcador avanzado
      const { AdvancedMarkerElement } = await loader.importLibrary("marker") as google.maps.MarkerLibrary;

      new AdvancedMarkerElement({
        position: location,
        map: map,
      });
    };

    initMap();
  }, []);

  // El mapa se mostrará en pantalla completa
  return <div ref={mapRef} className="w-full h-screen" />;
}

export default GoogleMaps;

🧠 Este componente debe usarse en una página o layout del lado del cliente ("use client"), ya que manipula el DOM y usa useEffect.

📍 Mostrar Múltiples Marcadores

Ahora vamos a mostrar varios marcadores en distintas ciudades dentro del mismo mapa.
Esto es útil para representar ubicaciones como oficinas, eventos o lugares importantes.

1. Lista de ubicaciones

Primero, crea un arreglo con las coordenadas y nombres de cada lugar:

// app/page.tsx o donde vayas a usar el componente
import GoogleMaps from "@/components/GoogleMaps";

const markers = [
  {
    lat: 37.774929,
    lng: -122.419418,
    title: "San Francisco"
  },
  {
    lat: 40.7128,
    lng: -74.0060,
    title: "New York"
  },
  {
    lat: 34.0522,
    lng: -118.2437,
    title: "Los Angeles"
  }
];

function Page() {
  return (
    <GoogleMaps markers={markers} />
  );
}

export default Page;

2. Componente GoogleMaps actualizado

Ahora modifica el componente para aceptar y renderizar múltiples marcadores:

"use client";

import { useEffect, useRef } from "react";
import { Loader } from "@googlemaps/js-api-loader";

interface Marker {
  lat: number;
  lng: number;
  title: string;
}

interface GoogleMapsProps {
  markers: Marker[];
}

function GoogleMaps({ markers }: GoogleMapsProps) {
  const mapRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const initMap = async () => {
      const loader = new Loader({
        apiKey: process.env.NEXT_PUBLIC_MAPS_API_KEY as string,
        version: "quarterly",
        libraries: ["places"],
      });

      const { Map } = await loader.importLibrary("maps");

      const defaultCenter = markers[0] || {
        lat: 37.774929,
        lng: -122.419418,
      };

      const options: google.maps.MapOptions = {
        center: defaultCenter,
        zoom: 4,
        mapId: "map",
      };

      const map = new Map(mapRef.current as HTMLElement, options);

      const { AdvancedMarkerElement } =
        (await loader.importLibrary("marker")) as google.maps.MarkerLibrary;

      markers.forEach((markerData) => {
        new AdvancedMarkerElement({
          position: { lat: markerData.lat, lng: markerData.lng },
          map: map,
          title: markerData.title,
        });
      });
    };

    initMap();
  }, [markers]);

  return <div ref={mapRef} className="w-full h-screen" />;
}

export default GoogleMaps;

🔍 Puedes ajustar el zoom y la lógica de centrado para adaptarlo a tu caso de uso.

Con esto, ya puedes mostrar un mapa con múltiples marcadores dinámicos en tu app de Next.js. ✅

🛠️ Personalizar opciones del mapa

Google Maps permite una gran cantidad de configuraciones para personalizar el comportamiento y apariencia del mapa.
Aquí tienes un ejemplo de cómo ajustar las opciones del mapa al inicializarlo:

const options: google.maps.MapOptions = {
  center: defaultCenter,          // Coordenadas centrales del mapa
  zoom: 14,                       // Nivel de zoom inicial
  mapId: "map",                   // ID personalizado del mapa (opcional)
  streetViewControl: false,       // Oculta el control de Street View
  mapTypeControl: false,          // Oculta los botones de tipo de mapa (satélite, terreno, etc.)
  fullscreenControl: true,        // Muestra el botón de pantalla completa (puedes ponerlo en false si no lo quieres)
  zoomControl: true               // Habilita o deshabilita el control de zoom
};

🧠 Tip

Puedes revisar toda la lista de opciones disponibles en la documentación oficial de Google Maps:

🔗 Google Maps JavaScript API - MapOptions

Personalizar estas opciones te permite brindar una mejor experiencia de usuario, controlando qué herramientas mostrar, qué tan lejos se puede hacer zoom, y cómo se ve el mapa en general.

✅ Conclusión

En este tutorial aprendiste a integrar Google Maps en una aplicación Next.js, desde la configuración inicial hasta la visualización de múltiples marcadores. También exploraste cómo personalizar las opciones del mapa para brindar una mejor experiencia al usuario.

Con esto, ahora puedes:

• Mostrar ubicaciones en un mapa dinámico.
• Agregar marcadores personalizados con títulos.
• Controlar la apariencia y funcionalidad del mapa usando MapOptions.

🧠 Siguiente paso sugerido: explora cómo usar eventos en los marcadores, cómo mostrar info windows al hacer clic, o cómo trabajar con rutas y geolocalización.

Si este tutorial te fue útil, ¡no olvides compartirlo con otros desarrolladores!
Y si tienes dudas o quieres ver más ejemplos prácticos, déjalo en los comentarios o contáctame. 🚀