react-google-maps

While the name 'react-google-maps' refers to an older library, the current and widely maintained solution for integrating Google Maps into React applications is `@react-google-maps/api`. This library provides a set of React components and hooks that act as wrappers around the official Google Maps JavaScript API, simplifying the process of displaying maps, adding markers, drawing shapes, and interacting with map events.

Key features and benefits of using `@react-google-maps/api` (the modern successor):

1. React-centric Approach: It allows developers to manage map elements (like markers, info windows, polygons) using React's component lifecycle and state management, rather than directly manipulating the imperative Google Maps API objects.
2. Ease of Use: Components like `GoogleMap`, `MarkerF` (functional marker), `InfoWindowF`, `PolygonF`, etc., abstract away the complexities of the underlying Google Maps API, making it intuitive to add and configure map features using props.
3. Performance Optimization: The library is designed to efficiently render map components and handle updates, leveraging React's reconciliation process.
4. Load Script Management: It provides a `useLoadScript` hook to effortlessly load the Google Maps JavaScript API script, handling loading states and potential errors.
5. Hooks-based API: Leverages React Hooks for managing map instances, event listeners, and component lifecycles.
6. Customization: Offers extensive customization options through props for map styles, controls, and behaviors, as well as the ability to render custom React components inside info windows or markers.

To use `@react-google-maps/api`, you typically need a Google Cloud Project with the Maps JavaScript API enabled and an API key. This API key is used to authenticate requests to Google's mapping services.

Example Code

import React, { useState, useCallback, useRef } from 'react';
import { GoogleMap, useLoadScript, MarkerF, InfoWindowF } from '@react-google-maps/api';

const containerStyle = {
  width: '80vw',
  height: '70vh'
};

const defaultCenter = {
  lat: -34.397, // Default to a location like Sydney, Australia
  lng: 150.644
};

const libraries = ['places']; // Example: if you need Google Places API

function MyMapComponent() {
  const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: "YOUR_GOOGLE_MAPS_API_KEY", // REMEMBER TO REPLACE WITH YOUR ACTUAL API KEY!
    libraries,
  });

  const mapRef = useRef(null);
  const onLoad = useCallback(function callback(map) {
    mapRef.current = map;
    // You can perform actions once the map loads, e.g., fit bounds
  }, []);

  const onUnmount = useCallback(function callback(map) {
    mapRef.current = null;
  }, []);

  const [markerPosition, setMarkerPosition] = useState(defaultCenter);
  const [infoWindowOpen, setInfoWindowOpen] = useState(false);

  const onMapClick = useCallback((e) => {
    // Optionally update marker position on map click
    setMarkerPosition({
      lat: e.latLng.lat(),
      lng: e.latLng.lng(),
    });
    setInfoWindowOpen(false); // Close any open info window when map is clicked
  }, []);

  if (loadError) return <div>Error loading maps: {loadError.message}</div>;
  if (!isLoaded) return <div>Loading Google Maps...</div>;

  return (
    <div style={{ padding: '20px' }}>
      <h2>My Interactive Google Map</h2>
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={defaultCenter}
        zoom={10}
        onLoad={onLoad}
        onUnmount={onUnmount}
        onClick={onMapClick}
        options={{
          // Optional: customize map options
          zoomControl: true,
          streetViewControl: false,
          mapTypeControl: false,
          fullscreenControl: false,
        }}
      >
        {/* Child components, such as markers, info windows, etc. */}
        <MarkerF
          position={markerPosition}
          onClick={() => setInfoWindowOpen(true)}
          animation={window.google.maps.Animation.DROP} // Example animation
        />

        {infoWindowOpen && (
          <InfoWindowF
            position={markerPosition}
            onCloseClick={() => setInfoWindowOpen(false)}
          >
            <div>
              <h3>📍 Marker Location</h3>
              <p>Latitude: {markerPosition.lat.toFixed(4)}</p>
              <p>Longitude: {markerPosition.lng.toFixed(4)}</p>
              <p>Click the map to move the marker!</p>
            </div>
          </InfoWindowF>
        )}
      </GoogleMap>
    </div>
  );
}

export default MyMapComponent;

Example Code

Related Topics