react-google-maps

@vis.gl/react-google-maps

Google のスポンサー支援を受け、vis.gl がメンテナンスしている Google Maps JavaScript API 用の公式 React ライブラリです。

クイックスタート

import { APIProvider, Map, AdvancedMarker, Pin } from '@vis.gl/react-google-maps';

function App() {
  return (
    <APIProvider apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!}>
      <Map
        style={{ width: '100%', height: '400px' }}
        defaultCenter={{ lat: 18.4655, lng: -66.1057 }}
        defaultZoom={12}
        mapId="YOUR_MAP_ID" // Required for AdvancedMarker
      >
        <AdvancedMarker position={{ lat: 18.4655, lng: -66.1057 }}>
          <Pin background="#0f9d58" borderColor="#006425" glyphColor="#60d98f" />
        </AdvancedMarker>
      </Map>
    </APIProvider>
  );
}

インストール

npm install @vis.gl/react-google-maps

主なエクスポート

// Components
import {
  APIProvider,      // Wraps app, loads Maps JS API
  Map,              // Map container
  AdvancedMarker,   // Modern marker (requires mapId)
  Pin,              // Customizable pin for AdvancedMarker
  InfoWindow,       // Popup windows
  MapControl,       // Custom controls on map
  Marker,           // Legacy marker (deprecated)
} from '@vis.gl/react-google-maps';

// Hooks
import {
  useMap,                  // Access google.maps.Map instance
  useMapsLibrary,          // Load additional libraries (places, geocoding, drawing)
  useAdvancedMarkerRef,    // Connect marker to InfoWindow
  useApiIsLoaded,          // Check if API is loaded
} from '@vis.gl/react-google-maps';

// Enums
import {
  ControlPosition,     // For MapControl positioning
  CollisionBehavior,   // For marker collision handling
} from '@vis.gl/react-google-maps';

重要な要件

1. AdvancedMarker には mapId が必須です - Google Cloud Console > Maps > Map Styles で作成してください
2. すべてのマップコンポーネントを APIProvider でラップする必要があります - アプリのルートまたはレイアウトレベルに配置してください
3. Circle、Polygon、Polyline はエクスポートされません - 実装については references/geometry-components.md を参照してください
4. places.Autocomplete は非推奨です（2025 年 3 月） - 代わりに AutocompleteService とカスタム UI を使用してください

リファレンスファイル

タスクに応じて、以下のファイルを参照してください。

タスク	リファレンスファイル
Map、Marker、InfoWindow、Pin の詳細	references/components-api.md
useMap、useMapsLibrary、フック	references/hooks-api.md
Circle、Polygon、Polyline	references/geometry-components.md
Places Autocomplete、Geocoding	references/places-autocomplete.md
ドラッグ可能なマーカーとリアルタイム同期、制御されたマップ	references/patterns.md

よく使うパターン

InfoWindow 付きマーカー

const MarkerWithInfo = ({ position }: { position: google.maps.LatLngLiteral }) => {
  const [markerRef, marker] = useAdvancedMarkerRef();
  const [open, setOpen] = useState(false);

  return (
    <>
      <AdvancedMarker ref={markerRef} position={position} onClick={() => setOpen(true)} />
      {open && (
        <InfoWindow anchor={marker} onClose={() => setOpen(false)}>
          <p>Hello!</p>
        </InfoWindow>
      )}
    </>
  );
};

リアルタイムで円と同期するドラッグ可能なマーカー

const DraggableWithCircle = () => {
  const [position, setPosition] = useState({ lat: 18.4655, lng: -66.1057 });

  return (
    <>
      <AdvancedMarker
        position={position}
        draggable
        onDrag={(e) => {
          // Updates DURING drag for real-time sync
          if (e.latLng) setPosition({ lat: e.latLng.lat(), lng: e.latLng.lng() });
        }}
      />
      <Circle center={position} radius={1000} /> {/* Follows marker in real-time */}
    </>
  );
};

カスタムマップコントロール

<Map {...props}>
  <MapControl position={ControlPosition.TOP_LEFT}>
    <button onClick={handleClick}>Custom Button</button>
  </MapControl>
</Map>

TypeScript 型

// Position types
type LatLngLiteral = { lat: number; lng: number };
type LatLngAltitudeLiteral = { lat: number; lng: number; altitude: number };

// Event types
type MapMouseEvent = google.maps.MapMouseEvent;
type AdvancedMarkerClickEvent = google.maps.marker.AdvancedMarkerClickEvent;

// Library types (from useMapsLibrary)
type PlacesLibrary = google.maps.PlacesLibrary;
type GeocodingLibrary = google.maps.GeocodingLibrary;
type DrawingLibrary = google.maps.DrawingLibrary;