Google Maps API em React e Next.js: TypeScript + @vis.gl

# Instalação das dependências
npm install @googlemaps/js-api-loader

# Configuração da API Key
# Adicione no seu arquivo .env.local:
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=sua_api_key_aqui

# Tipos TypeScript (opcional)
npm install --save-dev @types/google.maps

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

function MapComponent() {
  const mapRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const initMap = async () => {
      const loader = new Loader({
        apiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!,
        version: 'weekly',
        libraries: ['places']
      });

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

      const map = new Map(mapRef.current!, {
        center: { lat: -23.5505, lng: -46.6333 }, // São Paulo
        zoom: 12,
        mapTypeId: 'roadmap'
      });
    };

    initMap();
  }, []);

  return (
    <div
      ref={mapRef}
      style={{ width: '100%', height: '400px' }}
    />
  );
}

export default MapComponent;

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

function MapWithMarkers() {
  const mapRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const initMap = async () => {
      const loader = new Loader({
        apiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!,
        version: 'weekly'
      });

      const { Map } = await loader.importLibrary('maps');
      const { Marker } = await loader.importLibrary('marker');

      const map = new Map(mapRef.current!, {
        center: { lat: -23.5505, lng: -46.6333 },
        zoom: 12
      });

      // Marcador simples
      const marker = new Marker({
        position: { lat: -23.5505, lng: -46.6333 },
        map: map,
        title: 'São Paulo'
      });

      // Marcador personalizado
      const customMarker = new Marker({
        position: { lat: -23.5489, lng: -46.6388 },
        map: map,
        title: 'Marco Zero',
        icon: {
          url: '/custom-marker.png',
          scaledSize: new google.maps.Size(40, 40)
        }
      });

      // InfoWindow
      const infoWindow = new google.maps.InfoWindow({
        content: '<h3>São Paulo</h3><p>Capital do estado de São Paulo</p>'
      });

      marker.addListener('click', () => {
        infoWindow.open(map, marker);
      });
    };

    initMap();
  }, []);

  return <div ref={mapRef} style={{ width: '100%', height: '400px' }} />;
}

export default MapWithMarkers;

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

function DirectionsMap() {
  const mapRef = useRef<HTMLDivElement>(null);
  const [directionsService, setDirectionsService] = useState<google.maps.DirectionsService | null>(null);
  const [directionsRenderer, setDirectionsRenderer] = useState<google.maps.DirectionsRenderer | null>(null);

  useEffect(() => {
    const initMap = async () => {
      const loader = new Loader({
        apiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!,
        version: 'weekly',
        libraries: ['routes']
      });

      const { Map } = await loader.importLibrary('maps');
      const { DirectionsService, DirectionsRenderer } = await loader.importLibrary('routes');

      const map = new Map(mapRef.current!, {
        center: { lat: -23.5505, lng: -46.6333 },
        zoom: 12
      });

      const service = new DirectionsService();
      const renderer = new DirectionsRenderer({
        draggable: true,
        map: map
      });

      setDirectionsService(service);
      setDirectionsRenderer(renderer);

      // Calcular rota
      service.route({
        origin: { lat: -23.5505, lng: -46.6333 }, // São Paulo
        destination: { lat: -23.5489, lng: -46.6388 }, // Marco Zero
        travelMode: google.maps.TravelMode.DRIVING
      }, (result, status) => {
        if (status === 'OK' && result) {
          renderer.setDirections(result);
        }
      });
    };

    initMap();
  }, []);

  const calculateRoute = (origin: string, destination: string) => {
    if (!directionsService || !directionsRenderer) return;

    directionsService.route({
      origin: origin,
      destination: destination,
      travelMode: google.maps.TravelMode.DRIVING
    }, (result, status) => {
      if (status === 'OK' && result) {
        directionsRenderer.setDirections(result);
      }
    });
  };

  return (
    <div>
      <div style={{ marginBottom: '10px' }}>
        <button onClick={() => calculateRoute('São Paulo, SP', 'Rio de Janeiro, RJ')}>
          São Paulo → Rio de Janeiro
        </button>
        <button onClick={() => calculateRoute('São Paulo, SP', 'Campinas, SP')}>
          São Paulo → Campinas
        </button>
      </div>
      <div ref={mapRef} style={{ width: '100%', height: '400px' }} />
    </div>
  );
}

export default DirectionsMap;

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

function PlacesMap() {
  const mapRef = useRef<HTMLDivElement>(null);
  const searchRef = useRef<HTMLInputElement>(null);
  const [map, setMap] = useState<google.maps.Map | null>(null);

  useEffect(() => {
    const initMap = async () => {
      const loader = new Loader({
        apiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!,
        version: 'weekly',
        libraries: ['places']
      });

      const { Map } = await loader.importLibrary('maps');
      const { PlacesService, Autocomplete } = await loader.importLibrary('places');

      const mapInstance = new Map(mapRef.current!, {
        center: { lat: -23.5505, lng: -46.6333 },
        zoom: 12
      });

      setMap(mapInstance);

      // Autocomplete
      if (searchRef.current) {
        const autocomplete = new Autocomplete(searchRef.current);
        autocomplete.bindTo('bounds', mapInstance);

        autocomplete.addListener('place_changed', () => {
          const place = autocomplete.getPlace();
          if (!place.geometry || !place.geometry.location) return;

          mapInstance.setCenter(place.geometry.location);
          mapInstance.setZoom(15);

          new google.maps.Marker({
            position: place.geometry.location,
            map: mapInstance,
            title: place.name
          });
        });
      }

      // Places Service
      const service = new PlacesService(mapInstance);

      // Buscar restaurantes próximos
      const request = {
        location: { lat: -23.5505, lng: -46.6333 },
        radius: 1000,
        type: 'restaurant'
      };

      service.nearbySearch(request, (results, status) => {
        if (status === google.maps.places.PlacesServiceStatus.OK && results) {
          results.slice(0, 5).forEach(place => {
            if (place.geometry?.location) {
              new google.maps.Marker({
                position: place.geometry.location,
                map: mapInstance,
                title: place.name,
                icon: {
                  url: 'https://maps.google.com/mapfiles/ms/icons/restaurant.png'
                }
              });
            }
          });
        }
      });
    };

    initMap();
  }, []);

  return (
    <div>
      <input
        ref={searchRef}
        type="text"
        placeholder="Buscar lugares..."
        style={{
          width: '300px',
          padding: '10px',
          marginBottom: '10px',
          border: '1px solid #ccc',
          borderRadius: '4px'
        }}
      />
      <div ref={mapRef} style={{ width: '100%', height: '400px' }} />
    </div>
  );
}

export default PlacesMap;