CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-google-maps--api

React.js Google Maps API integration with components and hooks for seamless Google Maps functionality

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

drawing-shapes.mddocs/

Drawing & Shapes

Components for creating and managing geometric shapes, drawing tools, and interactive drawing functionality on the map. Includes polygons, polylines, circles, rectangles, and advanced drawing tools.

Capabilities

Polygon Component

Draws filled polygon shapes on the map with support for complex paths, editing, and rich interaction events.

/**
 * Draws filled polygon shapes on the map
 * Supports complex paths with holes, editing, and interaction events
 */
interface PolygonProps {
  options?: google.maps.PolygonOptions;
  draggable?: boolean;
  editable?: boolean;
  visible?: boolean;
  path?: google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[];
  paths?: google.maps.MVCArray<google.maps.LatLng> | google.maps.MVCArray<google.maps.MVCArray<google.maps.LatLng>> | google.maps.LatLng[] | google.maps.LatLng[][] | google.maps.LatLngLiteral[] | google.maps.LatLngLiteral[][];
  
  // Mouse events
  onClick?: (e: google.maps.MapMouseEvent) => void;
  onDblClick?: (e: google.maps.MapMouseEvent) => void;
  onDrag?: (e: google.maps.MapMouseEvent) => void;
  onDragEnd?: (e: google.maps.MapMouseEvent) => void;
  onDragStart?: (e: google.maps.MapMouseEvent) => void;
  onMouseDown?: (e: google.maps.MapMouseEvent) => void;
  onMouseMove?: (e: google.maps.MapMouseEvent) => void;
  onMouseOut?: (e: google.maps.MapMouseEvent) => void;
  onMouseOver?: (e: google.maps.MapMouseEvent) => void;
  onMouseUp?: (e: google.maps.MapMouseEvent) => void;
  onRightClick?: (e: google.maps.MapMouseEvent) => void;
  
  // Polygon-specific events
  onEdit?: (polygon: google.maps.Polygon) => void;
  
  // Lifecycle events
  onLoad?: (polygon: google.maps.Polygon) => void;
  onUnmount?: (polygon: google.maps.Polygon) => void;
}

function Polygon(props: PolygonProps): JSX.Element;

Usage Examples:

import React, { useState } from 'react';
import { GoogleMap, LoadScript, Polygon } from '@react-google-maps/api';

// Basic polygon
function BasicPolygon() {
  const path = [
    { lat: 40.7128, lng: -74.0060 },
    { lat: 40.7589, lng: -73.9851 },
    { lat: 40.7505, lng: -73.9934 },
    { lat: 40.7128, lng: -74.0060 }
  ];
  
  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <GoogleMap
        center={{ lat: 40.7128, lng: -74.0060 }}
        zoom={13}
        mapContainerStyle={{ width: '100%', height: '400px' }}
      >
        <Polygon
          path={path}
          options={{
            fillColor: '#ff6b6b',
            fillOpacity: 0.4,
            strokeColor: '#ff6b6b',
            strokeOpacity: 1,
            strokeWeight: 2
          }}
        />
      </GoogleMap>
    </LoadScript>
  );
}

// Interactive editable polygon
function EditablePolygon() {
  const [path, setPath] = useState([
    { lat: 40.7128, lng: -74.0060 },
    { lat: 40.7589, lng: -73.9851 },
    { lat: 40.7505, lng: -73.9934 }
  ]);
  
  const onEdit = (polygon: google.maps.Polygon) => {
    const newPath = polygon.getPath().getArray().map(latLng => ({
      lat: latLng.lat(),
      lng: latLng.lng()
    }));
    setPath(newPath);
    console.log('Polygon edited:', newPath);
  };
  
  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <GoogleMap
        center={{ lat: 40.7128, lng: -74.0060 }}
        zoom={13}
        mapContainerStyle={{ width: '100%', height: '400px' }}
      >
        <Polygon
          path={path}
          editable={true}
          draggable={true}
          options={{
            fillColor: '#4285f4',
            fillOpacity: 0.3,
            strokeColor: '#4285f4',
            strokeOpacity: 0.8,
            strokeWeight: 2
          }}
          onEdit={onEdit}
          onDragEnd={() => console.log('Polygon drag ended')}
        />
      </GoogleMap>
    </LoadScript>
  );
}

// Complex polygon with holes
function PolygonWithHoles() {
  const outerPath = [
    { lat: 40.7128, lng: -74.0060 },
    { lat: 40.7628, lng: -73.9810 },
    { lat: 40.7505, lng: -73.9434 },
    { lat: 40.7028, lng: -73.9660 }
  ];
  
  const innerPath = [
    { lat: 40.7228, lng: -73.9960 },
    { lat: 40.7428, lng: -73.9860 },
    { lat: 40.7328, lng: -73.9760 }
  ];
  
  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <GoogleMap
        center={{ lat: 40.7328, lng: -73.9860 }}
        zoom={13}
        mapContainerStyle={{ width: '100%', height: '400px' }}
      >
        <Polygon
          paths={[outerPath, innerPath]}
          options={{
            fillColor: '#34a853',
            fillOpacity: 0.4,
            strokeColor: '#34a853',
            strokeOpacity: 1,
            strokeWeight: 2
          }}
        />
      </GoogleMap>
    </LoadScript>
  );
}

PolygonF Component

Functional component variant of Polygon that uses React hooks internally.

/**
 * Functional variant of Polygon component using hooks internally
 */
function PolygonF(props: PolygonProps): JSX.Element;

Polyline Component

Draws connected line segments on the map with customizable styling and interaction capabilities.

/**
 * Draws connected line segments on the map
 * Supports complex paths, custom styling, and interaction events
 */
interface PolylineProps {
  options?: google.maps.PolylineOptions;
  draggable?: boolean;
  editable?: boolean;
  visible?: boolean;
  path?: google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[];
  
  // Mouse events
  onClick?: (e: google.maps.MapMouseEvent) => void;
  onDblClick?: (e: google.maps.MapMouseEvent) => void;
  onDrag?: (e: google.maps.MapMouseEvent) => void;
  onDragEnd?: (e: google.maps.MapMouseEvent) => void;
  onDragStart?: (e: google.maps.MapMouseEvent) => void;
  onMouseDown?: (e: google.maps.MapMouseEvent) => void;
  onMouseMove?: (e: google.maps.MapMouseEvent) => void;
  onMouseOut?: (e: google.maps.MapMouseEvent) => void;
  onMouseOver?: (e: google.maps.MapMouseEvent) => void;
  onMouseUp?: (e: google.maps.MapMouseEvent) => void;
  onRightClick?: (e: google.maps.MapMouseEvent) => void;
  
  // Lifecycle events
  onLoad?: (polyline: google.maps.Polyline) => void;
  onUnmount?: (polyline: google.maps.Polyline) => void;
}

function Polyline(props: PolylineProps): JSX.Element;

Usage Examples:

import React, { useState } from 'react';
import { GoogleMap, LoadScript, Polyline } from '@react-google-maps/api';

// Basic route polyline
function RoutePolyline() {
  const flightPath = [
    { lat: 40.7128, lng: -74.0060 },
    { lat: 40.7589, lng: -73.9851 },
    { lat: 40.7505, lng: -73.9934 },
    { lat: 40.7614, lng: -73.9776 },
    { lat: 40.7489, lng: -73.9680 }
  ];
  
  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <GoogleMap
        center={{ lat: 40.7128, lng: -74.0060 }}
        zoom={13}
        mapContainerStyle={{ width: '100%', height: '400px' }}
      >
        <Polyline
          path={flightPath}
          options={{
            strokeColor: '#ff6b6b',
            strokeOpacity: 1.0,
            strokeWeight: 3
          }}
        />
      </GoogleMap>
    </LoadScript>
  );
}

// Styled polylines with different patterns
function StyledPolylines() {
  const route1 = [
    { lat: 40.7128, lng: -74.0060 },
    { lat: 40.7589, lng: -73.9851 }
  ];
  
  const route2 = [
    { lat: 40.7589, lng: -73.9851 },
    { lat: 40.7505, lng: -73.9934 }
  ];
  
  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <GoogleMap
        center={{ lat: 40.7128, lng: -74.0060 }}
        zoom={13}
        mapContainerStyle={{ width: '100%', height: '400px' }}
      >
        {/* Solid line */}
        <Polyline
          path={route1}
          options={{
            strokeColor: '#4285f4',
            strokeOpacity: 1.0,
            strokeWeight: 4
          }}
        />
        
        {/* Dashed line */}
        <Polyline
          path={route2}
          options={{
            strokeColor: '#34a853',
            strokeOpacity: 0.8,
            strokeWeight: 3,
            icons: [{
              icon: {
                path: 'M 0,-1 0,1',
                strokeOpacity: 1,
                scale: 4
              },
              offset: '0',
              repeat: '20px'
            }]
          }}
        />
      </GoogleMap>
    </LoadScript>
  );
}

// Interactive editable polyline
function EditablePolyline() {
  const [path, setPath] = useState([
    { lat: 40.7128, lng: -74.0060 },
    { lat: 40.7589, lng: -73.9851 }
  ]);
  
  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <GoogleMap
        center={{ lat: 40.7128, lng: -74.0060 }}
        zoom={13}
        mapContainerStyle={{ width: '100%', height: '400px' }}
      >
        <Polyline
          path={path}
          editable={true}
          draggable={true}
          options={{
            strokeColor: '#ff6b6b',
            strokeOpacity: 1.0,
            strokeWeight: 3
          }}
          onDragEnd={() => console.log('Polyline moved')}
        />
      </GoogleMap>
    </LoadScript>
  );
}

PolylineF Component

Functional component variant of Polyline that uses React hooks internally.

/**
 * Functional variant of Polyline component using hooks internally
 */
function PolylineF(props: PolylineProps): JSX.Element;

Circle Component

Draws circular shapes on the map with customizable radius, styling, and interaction capabilities.

/**
 * Draws circular shapes on the map
 * Supports radius configuration, styling, and interaction events
 */
interface CircleProps {
  options?: google.maps.CircleOptions;
  center?: google.maps.LatLng | google.maps.LatLngLiteral;
  radius?: number;
  draggable?: boolean;
  editable?: boolean;
  visible?: boolean;
  
  // Mouse events
  onClick?: (e: google.maps.MapMouseEvent) => void;
  onDblClick?: (e: google.maps.MapMouseEvent) => void;
  onDrag?: (e: google.maps.MapMouseEvent) => void;
  onDragEnd?: (e: google.maps.MapMouseEvent) => void;
  onDragStart?: (e: google.maps.MapMouseEvent) => void;
  onMouseDown?: (e: google.maps.MapMouseEvent) => void;
  onMouseMove?: (e: google.maps.MapMouseEvent) => void;
  onMouseOut?: (e: google.maps.MapMouseEvent) => void;
  onMouseOver?: (e: google.maps.MapMouseEvent) => void;
  onMouseUp?: (e: google.maps.MapMouseEvent) => void;
  onRightClick?: (e: google.maps.MapMouseEvent) => void;
  
  // Circle-specific events
  onCenterChanged?: () => void;
  onRadiusChanged?: () => void;
  
  // Lifecycle events
  onLoad?: (circle: google.maps.Circle) => void;
  onUnmount?: (circle: google.maps.Circle) => void;
}

function Circle(props: CircleProps): JSX.Element;

Usage Examples:

import React, { useState } from 'react';
import { GoogleMap, LoadScript, Circle } from '@react-google-maps/api';

// Basic circles with different sizes
function BasicCircles() {
  const center = { lat: 40.7128, lng: -74.0060 };
  
  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <GoogleMap
        center={center}
        zoom={11}
        mapContainerStyle={{ width: '100%', height: '400px' }}
      >
        {/* Small circle */}
        <Circle
          center={center}
          radius={1000}
          options={{
            fillColor: '#ff6b6b',
            fillOpacity: 0.3,
            strokeColor: '#ff6b6b',
            strokeOpacity: 0.8,
            strokeWeight: 2
          }}
        />
        
        {/* Medium circle */}
        <Circle
          center={{ lat: 40.7628, lng: -73.9810 }}
          radius={2000}
          options={{
            fillColor: '#4285f4',
            fillOpacity: 0.2,
            strokeColor: '#4285f4',
            strokeOpacity: 0.6,
            strokeWeight: 2
          }}
        />
      </GoogleMap>
    </LoadScript>
  );
}

// Interactive editable circle
function EditableCircle() {
  const [center, setCenter] = useState({ lat: 40.7128, lng: -74.0060 });
  const [radius, setRadius] = useState(2000);
  
  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <div>
        <div style={{ padding: '10px' }}>
          <div>Center: {center.lat.toFixed(4)}, {center.lng.toFixed(4)}</div>
          <div>Radius: {radius.toFixed(0)} meters</div>
        </div>
        
        <GoogleMap
          center={center}
          zoom={12}
          mapContainerStyle={{ width: '100%', height: '400px' }}
        >
          <Circle
            center={center}
            radius={radius}
            editable={true}
            draggable={true}
            options={{
              fillColor: '#34a853',
              fillOpacity: 0.3,
              strokeColor: '#34a853',
              strokeOpacity: 0.8,
              strokeWeight: 2
            }}
            onCenterChanged={() => {
              // Note: In real implementation, you'd get the circle instance
              // and call getCenter() to get the new center
              console.log('Circle center changed');
            }}
            onRadiusChanged={() => {
              // Note: In real implementation, you'd get the circle instance
              // and call getRadius() to get the new radius
              console.log('Circle radius changed');
            }}
            onLoad={(circle) => {
              console.log('Circle loaded with radius:', circle.getRadius());
            }}
          />
        </GoogleMap>
      </div>
    </LoadScript>
  );
}

CircleF Component

Functional component variant of Circle that uses React hooks internally.

/**
 * Functional variant of Circle component using hooks internally
 */
function CircleF(props: CircleProps): JSX.Element;

Rectangle Component

Draws rectangular shapes on the map defined by geographic bounds with interaction and editing capabilities.

/**
 * Draws rectangular shapes on the map
 * Defined by geographic bounds with interaction and editing capabilities
 */
interface RectangleProps {
  options?: google.maps.RectangleOptions;
  bounds?: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral;
  draggable?: boolean;
  editable?: boolean;
  visible?: boolean;
  
  // Mouse events
  onClick?: (e: google.maps.MapMouseEvent) => void;
  onDblClick?: (e: google.maps.MapMouseEvent) => void;
  onDrag?: (e: google.maps.MapMouseEvent) => void;
  onDragEnd?: (e: google.maps.MapMouseEvent) => void;
  onDragStart?: (e: google.maps.MapMouseEvent) => void;
  onMouseDown?: (e: google.maps.MapMouseEvent) => void;
  onMouseMove?: (e: google.maps.MapMouseEvent) => void;
  onMouseOut?: (e: google.maps.MapMouseEvent) => void;
  onMouseOver?: (e: google.maps.MapMouseEvent) => void;
  onMouseUp?: (e: google.maps.MapMouseEvent) => void;
  onRightClick?: (e: google.maps.MapMouseEvent) => void;
  
  // Rectangle-specific events
  onBoundsChanged?: () => void;
  
  // Lifecycle events
  onLoad?: (rectangle: google.maps.Rectangle) => void;
  onUnmount?: (rectangle: google.maps.Rectangle) => void;
}

function Rectangle(props: RectangleProps): JSX.Element;

Usage Examples:

import React, { useState } from 'react';
import { GoogleMap, LoadScript, Rectangle } from '@react-google-maps/api';

// Basic rectangle
function BasicRectangle() {
  const bounds = {
    north: 40.7739,
    south: 40.7128,
    east: -73.9657,
    west: -74.0060
  };
  
  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <GoogleMap
        center={{ lat: 40.7433, lng: -73.9859 }}
        zoom={12}
        mapContainerStyle={{ width: '100%', height: '400px' }}
      >
        <Rectangle
          bounds={bounds}
          options={{
            fillColor: '#ff6b6b',
            fillOpacity: 0.3,
            strokeColor: '#ff6b6b',
            strokeOpacity: 0.8,
            strokeWeight: 2
          }}
        />
      </GoogleMap>
    </LoadScript>
  );
}

// Editable rectangle with bounds tracking
function EditableRectangle() {
  const [bounds, setBounds] = useState({
    north: 40.7739,
    south: 40.7128,
    east: -73.9657,
    west: -74.0060
  });
  
  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <div>
        <div style={{ padding: '10px' }}>
          <div>Bounds:</div>
          <div>North: {bounds.north.toFixed(4)}</div>
          <div>South: {bounds.south.toFixed(4)}</div>
          <div>East: {bounds.east.toFixed(4)}</div>
          <div>West: {bounds.west.toFixed(4)}</div>
        </div>
        
        <GoogleMap
          center={{ lat: 40.7433, lng: -73.9859 }}
          zoom={12}
          mapContainerStyle={{ width: '100%', height: '400px' }}
        >
          <Rectangle
            bounds={bounds}
            editable={true}
            draggable={true}
            options={{
              fillColor: '#4285f4',
              fillOpacity: 0.2,
              strokeColor: '#4285f4',
              strokeOpacity: 0.8,
              strokeWeight: 2
            }}
            onBoundsChanged={() => {
              console.log('Rectangle bounds changed');
            }}
            onLoad={(rectangle) => {
              console.log('Rectangle loaded:', rectangle.getBounds()?.toJSON());
            }}
          />
        </GoogleMap>
      </div>
    </LoadScript>
  );
}

RectangleF Component

Functional component variant of Rectangle that uses React hooks internally.

/**
 * Functional variant of Rectangle component using hooks internally
 */
function RectangleF(props: RectangleProps): JSX.Element;

Data Component

Displays arbitrary geospatial data including GeoJSON with styling and interaction capabilities.

/**
 * Displays arbitrary geospatial data (GeoJSON, etc.)
 * Supports data loading, styling, and feature interaction
 */
interface DataProps {
  options?: google.maps.Data.DataOptions;
  
  // Event handlers
  onAddFeature?: (e: google.maps.Data.AddFeatureEvent) => void;
  onClick?: (e: google.maps.Data.MouseEvent) => void;
  onDblClick?: (e: google.maps.Data.MouseEvent) => void;
  onMouseDown?: (e: google.maps.Data.MouseEvent) => void;
  onMouseOut?: (e: google.maps.Data.MouseEvent) => void;
  onMouseOver?: (e: google.maps.Data.MouseEvent) => void;
  onMouseUp?: (e: google.maps.Data.MouseEvent) => void;
  onRemoveFeature?: (e: google.maps.Data.RemoveFeatureEvent) => void;
  onRemoveProperty?: (e: google.maps.Data.RemovePropertyEvent) => void;
  onRightClick?: (e: google.maps.Data.MouseEvent) => void;
  onSetGeometry?: (e: google.maps.Data.SetGeometryEvent) => void;
  onSetProperty?: (e: google.maps.Data.SetPropertyEvent) => void;
  
  // Lifecycle events
  onLoad?: (data: google.maps.Data) => void;
  onUnmount?: (data: google.maps.Data) => void;
}

function Data(props: DataProps): JSX.Element;

Usage Examples:

import React from 'react';
import { GoogleMap, LoadScript, Data } from '@react-google-maps/api';

// GeoJSON data display
function GeoJSONData() {
  const geoJsonUrl = 'https://example.com/data.geojson';
  
  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <GoogleMap
        center={{ lat: 40.7128, lng: -74.0060 }}
        zoom={10}
        mapContainerStyle={{ width: '100%', height: '400px' }}
      >
        <Data
          onLoad={(data) => {
            // Load GeoJSON data
            data.loadGeoJson(geoJsonUrl);
            
            // Set custom styling
            data.setStyle({
              fillColor: '#ff6b6b',
              fillOpacity: 0.4,
              strokeColor: '#ff6b6b',
              strokeWeight: 2
            });
          }}
          onClick={(e) => {
            console.log('Feature clicked:', e.feature.getProperty('name'));
          }}
        />
      </GoogleMap>
    </LoadScript>
  );
}

DataF Component

Functional component variant of Data that uses React hooks internally.

/**
 * Functional variant of Data component using hooks internally
 */
function DataF(props: DataProps): JSX.Element;

DrawingManager Component

Provides drawing tools for creating shapes interactively on the map with comprehensive drawing mode support.

/**
 * Provides drawing tools for creating shapes on the map
 * Supports multiple drawing modes and shape creation events
 */
interface DrawingManagerProps {
  options?: google.maps.drawing.DrawingManagerOptions;
  drawingMode?: google.maps.drawing.OverlayType;
  
  // Drawing events
  onCircleComplete?: (circle: google.maps.Circle) => void;
  onMarkerComplete?: (marker: google.maps.Marker) => void;
  onOverlayComplete?: (e: google.maps.drawing.OverlayCompleteEvent) => void;
  onPolygonComplete?: (polygon: google.maps.Polygon) => void;
  onPolylineComplete?: (polyline: google.maps.Polyline) => void;
  onRectangleComplete?: (rectangle: google.maps.Rectangle) => void;
  
  // Lifecycle events
  onLoad?: (drawingManager: google.maps.drawing.DrawingManager) => void;
  onUnmount?: (drawingManager: google.maps.drawing.DrawingManager) => void;
}

function DrawingManager(props: DrawingManagerProps): JSX.Element;

Usage Examples:

import React, { useState } from 'react';
import { GoogleMap, LoadScript, DrawingManager } from '@react-google-maps/api';

// Interactive drawing tool
function DrawingTool() {
  const [drawingMode, setDrawingMode] = useState<google.maps.drawing.OverlayType | null>(null);
  const [shapes, setShapes] = useState<any[]>([]);
  
  const drawingManagerOptions = {
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE
      ]
    },
    markerOptions: {
      icon: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png',
      draggable: true
    },
    circleOptions: {
      fillColor: '#ff6b6b',
      fillOpacity: 0.3,
      strokeWeight: 2,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  };
  
  const onOverlayComplete = (e: google.maps.drawing.OverlayCompleteEvent) => {
    const newShape = {
      type: e.type,
      overlay: e.overlay,
      id: Date.now()
    };
    
    setShapes(prev => [...prev, newShape]);
    console.log('Shape created:', newShape);
    
    // Reset drawing mode after creating a shape
    setDrawingMode(null);
  };
  
  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY" libraries={['drawing']}>
      <div>
        <div style={{ padding: '10px' }}>
          <div>Drawing Mode: {drawingMode || 'None'}</div>
          <div>Shapes Created: {shapes.length}</div>
          <button onClick={() => setDrawingMode(google.maps.drawing.OverlayType.POLYGON)}>
            Draw Polygon
          </button>
          <button onClick={() => setDrawingMode(google.maps.drawing.OverlayType.CIRCLE)}>
            Draw Circle
          </button>
          <button onClick={() => setDrawingMode(null)}>
            Stop Drawing
          </button>
        </div>
        
        <GoogleMap
          center={{ lat: 40.7128, lng: -74.0060 }}
          zoom={10}
          mapContainerStyle={{ width: '100%', height: '400px' }}
        >
          <DrawingManager
            drawingMode={drawingMode}
            options={drawingManagerOptions}
            onOverlayComplete={onOverlayComplete}
            onLoad={(drawingManager) => console.log('DrawingManager loaded')}
          />
        </GoogleMap>
      </div>
    </LoadScript>
  );
}

// Custom drawing controls
function CustomDrawingControls() {
  const [currentTool, setCurrentTool] = useState<string>('');
  
  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY" libraries={['drawing']}>
      <div>
        <div style={{ padding: '10px', background: '#f0f0f0' }}>
          <button 
            onClick={() => setCurrentTool('polygon')}
            style={{ marginRight: '10px' }}
          >
            Draw Area
          </button>
          <button 
            onClick={() => setCurrentTool('polyline')}
            style={{ marginRight: '10px' }}
          >
            Draw Route
          </button>
          <button 
            onClick={() => setCurrentTool('circle')}
            style={{ marginRight: '10px' }}
          >
            Draw Circle
          </button>
          <button onClick={() => setCurrentTool('')}>
            Stop
          </button>
          <span style={{ marginLeft: '20px' }}>
            Current Tool: {currentTool || 'None'}
          </span>
        </div>
        
        <GoogleMap
          center={{ lat: 40.7128, lng: -74.0060 }}
          zoom={10}
          mapContainerStyle={{ width: '100%', height: '400px' }}
        >
          <DrawingManager
            drawingMode={
              currentTool === 'polygon' ? google.maps.drawing.OverlayType.POLYGON :
              currentTool === 'polyline' ? google.maps.drawing.OverlayType.POLYLINE :
              currentTool === 'circle' ? google.maps.drawing.OverlayType.CIRCLE :
              null
            }
            options={{
              drawingControl: false, // Hide default controls
              polygonOptions: {
                fillColor: '#ff6b6b',
                fillOpacity: 0.3,
                strokeColor: '#ff6b6b',
                strokeWeight: 2,
                editable: true
              },
              polylineOptions: {
                strokeColor: '#4285f4',
                strokeWeight: 3
              },
              circleOptions: {
                fillColor: '#34a853',
                fillOpacity: 0.2,
                strokeColor: '#34a853',
                strokeWeight: 2,
                editable: true
              }
            }}
            onPolygonComplete={(polygon) => {
              console.log('Polygon completed:', polygon.getPath().getArray());
              setCurrentTool('');
            }}
            onPolylineComplete={(polyline) => {
              console.log('Polyline completed:', polyline.getPath().getArray());
              setCurrentTool('');
            }}
            onCircleComplete={(circle) => {
              console.log('Circle completed:', {
                center: circle.getCenter()?.toJSON(),
                radius: circle.getRadius()
              });
              setCurrentTool('');
            }}
          />
        </GoogleMap>
      </div>
    </LoadScript>
  );
}

DrawingManagerF Component

Functional component variant of DrawingManager that uses React hooks internally.

/**
 * Functional variant of DrawingManager component using hooks internally
 */
function DrawingManagerF(props: DrawingManagerProps): JSX.Element;

Install with Tessl CLI

npx tessl i tessl/npm-react-google-maps--api

docs

clustering.md

core-map.md

drawing-shapes.md

index.md

layers.md

markers-overlays.md

places.md

script-loading.md

services.md

tile.json