0
# Drawing & Shapes
1

2
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.
3

4
## Capabilities
5

6
### Polygon Component
7

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

10
```typescript { .api }
11
/**
12
 * Draws filled polygon shapes on the map
13
 * Supports complex paths with holes, editing, and interaction events
14
 */
15
interface PolygonProps {
16
  options?: google.maps.PolygonOptions;
17
  draggable?: boolean;
18
  editable?: boolean;
19
  visible?: boolean;
20
  path?: google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[];
21
  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[][];
22
  
23
  // Mouse events
24
  onClick?: (e: google.maps.MapMouseEvent) => void;
25
  onDblClick?: (e: google.maps.MapMouseEvent) => void;
26
  onDrag?: (e: google.maps.MapMouseEvent) => void;
27
  onDragEnd?: (e: google.maps.MapMouseEvent) => void;
28
  onDragStart?: (e: google.maps.MapMouseEvent) => void;
29
  onMouseDown?: (e: google.maps.MapMouseEvent) => void;
30
  onMouseMove?: (e: google.maps.MapMouseEvent) => void;
31
  onMouseOut?: (e: google.maps.MapMouseEvent) => void;
32
  onMouseOver?: (e: google.maps.MapMouseEvent) => void;
33
  onMouseUp?: (e: google.maps.MapMouseEvent) => void;
34
  onRightClick?: (e: google.maps.MapMouseEvent) => void;
35
  
36
  // Polygon-specific events
37
  onEdit?: (polygon: google.maps.Polygon) => void;
38
  
39
  // Lifecycle events
40
  onLoad?: (polygon: google.maps.Polygon) => void;
41
  onUnmount?: (polygon: google.maps.Polygon) => void;
42
}
43

44
function Polygon(props: PolygonProps): JSX.Element;
45
```
46

47
**Usage Examples:**
48

49
```typescript
50
import React, { useState } from 'react';
51
import { GoogleMap, LoadScript, Polygon } from '@react-google-maps/api';
52

53
// Basic polygon
54
function BasicPolygon() {
55
  const path = [
56
    { lat: 40.7128, lng: -74.0060 },
57
    { lat: 40.7589, lng: -73.9851 },
58
    { lat: 40.7505, lng: -73.9934 },
59
    { lat: 40.7128, lng: -74.0060 }
60
  ];
61
  
62
  return (
63
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
64
      <GoogleMap
65
        center={{ lat: 40.7128, lng: -74.0060 }}
66
        zoom={13}
67
        mapContainerStyle={{ width: '100%', height: '400px' }}
68
      >
69
        <Polygon
70
          path={path}
71
          options={{
72
            fillColor: '#ff6b6b',
73
            fillOpacity: 0.4,
74
            strokeColor: '#ff6b6b',
75
            strokeOpacity: 1,
76
            strokeWeight: 2
77
          }}
78
        />
79
      </GoogleMap>
80
    </LoadScript>
81
  );
82
}
83

84
// Interactive editable polygon
85
function EditablePolygon() {
86
  const [path, setPath] = useState([
87
    { lat: 40.7128, lng: -74.0060 },
88
    { lat: 40.7589, lng: -73.9851 },
89
    { lat: 40.7505, lng: -73.9934 }
90
  ]);
91
  
92
  const onEdit = (polygon: google.maps.Polygon) => {
93
    const newPath = polygon.getPath().getArray().map(latLng => ({
94
      lat: latLng.lat(),
95
      lng: latLng.lng()
96
    }));
97
    setPath(newPath);
98
    console.log('Polygon edited:', newPath);
99
  };
100
  
101
  return (
102
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
103
      <GoogleMap
104
        center={{ lat: 40.7128, lng: -74.0060 }}
105
        zoom={13}
106
        mapContainerStyle={{ width: '100%', height: '400px' }}
107
      >
108
        <Polygon
109
          path={path}
110
          editable={true}
111
          draggable={true}
112
          options={{
113
            fillColor: '#4285f4',
114
            fillOpacity: 0.3,
115
            strokeColor: '#4285f4',
116
            strokeOpacity: 0.8,
117
            strokeWeight: 2
118
          }}
119
          onEdit={onEdit}
120
          onDragEnd={() => console.log('Polygon drag ended')}
121
        />
122
      </GoogleMap>
123
    </LoadScript>
124
  );
125
}
126

127
// Complex polygon with holes
128
function PolygonWithHoles() {
129
  const outerPath = [
130
    { lat: 40.7128, lng: -74.0060 },
131
    { lat: 40.7628, lng: -73.9810 },
132
    { lat: 40.7505, lng: -73.9434 },
133
    { lat: 40.7028, lng: -73.9660 }
134
  ];
135
  
136
  const innerPath = [
137
    { lat: 40.7228, lng: -73.9960 },
138
    { lat: 40.7428, lng: -73.9860 },
139
    { lat: 40.7328, lng: -73.9760 }
140
  ];
141
  
142
  return (
143
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
144
      <GoogleMap
145
        center={{ lat: 40.7328, lng: -73.9860 }}
146
        zoom={13}
147
        mapContainerStyle={{ width: '100%', height: '400px' }}
148
      >
149
        <Polygon
150
          paths={[outerPath, innerPath]}
151
          options={{
152
            fillColor: '#34a853',
153
            fillOpacity: 0.4,
154
            strokeColor: '#34a853',
155
            strokeOpacity: 1,
156
            strokeWeight: 2
157
          }}
158
        />
159
      </GoogleMap>
160
    </LoadScript>
161
  );
162
}
163
```
164

165
### PolygonF Component
166

167
Functional component variant of Polygon that uses React hooks internally.
168

169
```typescript { .api }
170
/**
171
 * Functional variant of Polygon component using hooks internally
172
 */
173
function PolygonF(props: PolygonProps): JSX.Element;
174
```
175

176
### Polyline Component
177

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

180
```typescript { .api }
181
/**
182
 * Draws connected line segments on the map
183
 * Supports complex paths, custom styling, and interaction events
184
 */
185
interface PolylineProps {
186
  options?: google.maps.PolylineOptions;
187
  draggable?: boolean;
188
  editable?: boolean;
189
  visible?: boolean;
190
  path?: google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[];
191
  
192
  // Mouse events
193
  onClick?: (e: google.maps.MapMouseEvent) => void;
194
  onDblClick?: (e: google.maps.MapMouseEvent) => void;
195
  onDrag?: (e: google.maps.MapMouseEvent) => void;
196
  onDragEnd?: (e: google.maps.MapMouseEvent) => void;
197
  onDragStart?: (e: google.maps.MapMouseEvent) => void;
198
  onMouseDown?: (e: google.maps.MapMouseEvent) => void;
199
  onMouseMove?: (e: google.maps.MapMouseEvent) => void;
200
  onMouseOut?: (e: google.maps.MapMouseEvent) => void;
201
  onMouseOver?: (e: google.maps.MapMouseEvent) => void;
202
  onMouseUp?: (e: google.maps.MapMouseEvent) => void;
203
  onRightClick?: (e: google.maps.MapMouseEvent) => void;
204
  
205
  // Lifecycle events
206
  onLoad?: (polyline: google.maps.Polyline) => void;
207
  onUnmount?: (polyline: google.maps.Polyline) => void;
208
}
209

210
function Polyline(props: PolylineProps): JSX.Element;
211
```
212

213
**Usage Examples:**
214

215
```typescript
216
import React, { useState } from 'react';
217
import { GoogleMap, LoadScript, Polyline } from '@react-google-maps/api';
218

219
// Basic route polyline
220
function RoutePolyline() {
221
  const flightPath = [
222
    { lat: 40.7128, lng: -74.0060 },
223
    { lat: 40.7589, lng: -73.9851 },
224
    { lat: 40.7505, lng: -73.9934 },
225
    { lat: 40.7614, lng: -73.9776 },
226
    { lat: 40.7489, lng: -73.9680 }
227
  ];
228
  
229
  return (
230
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
231
      <GoogleMap
232
        center={{ lat: 40.7128, lng: -74.0060 }}
233
        zoom={13}
234
        mapContainerStyle={{ width: '100%', height: '400px' }}
235
      >
236
        <Polyline
237
          path={flightPath}
238
          options={{
239
            strokeColor: '#ff6b6b',
240
            strokeOpacity: 1.0,
241
            strokeWeight: 3
242
          }}
243
        />
244
      </GoogleMap>
245
    </LoadScript>
246
  );
247
}
248

249
// Styled polylines with different patterns
250
function StyledPolylines() {
251
  const route1 = [
252
    { lat: 40.7128, lng: -74.0060 },
253
    { lat: 40.7589, lng: -73.9851 }
254
  ];
255
  
256
  const route2 = [
257
    { lat: 40.7589, lng: -73.9851 },
258
    { lat: 40.7505, lng: -73.9934 }
259
  ];
260
  
261
  return (
262
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
263
      <GoogleMap
264
        center={{ lat: 40.7128, lng: -74.0060 }}
265
        zoom={13}
266
        mapContainerStyle={{ width: '100%', height: '400px' }}
267
      >
268
        {/* Solid line */}
269
        <Polyline
270
          path={route1}
271
          options={{
272
            strokeColor: '#4285f4',
273
            strokeOpacity: 1.0,
274
            strokeWeight: 4
275
          }}
276
        />
277
        
278
        {/* Dashed line */}
279
        <Polyline
280
          path={route2}
281
          options={{
282
            strokeColor: '#34a853',
283
            strokeOpacity: 0.8,
284
            strokeWeight: 3,
285
            icons: [{
286
              icon: {
287
                path: 'M 0,-1 0,1',
288
                strokeOpacity: 1,
289
                scale: 4
290
              },
291
              offset: '0',
292
              repeat: '20px'
293
            }]
294
          }}
295
        />
296
      </GoogleMap>
297
    </LoadScript>
298
  );
299
}
300

301
// Interactive editable polyline
302
function EditablePolyline() {
303
  const [path, setPath] = useState([
304
    { lat: 40.7128, lng: -74.0060 },
305
    { lat: 40.7589, lng: -73.9851 }
306
  ]);
307
  
308
  return (
309
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
310
      <GoogleMap
311
        center={{ lat: 40.7128, lng: -74.0060 }}
312
        zoom={13}
313
        mapContainerStyle={{ width: '100%', height: '400px' }}
314
      >
315
        <Polyline
316
          path={path}
317
          editable={true}
318
          draggable={true}
319
          options={{
320
            strokeColor: '#ff6b6b',
321
            strokeOpacity: 1.0,
322
            strokeWeight: 3
323
          }}
324
          onDragEnd={() => console.log('Polyline moved')}
325
        />
326
      </GoogleMap>
327
    </LoadScript>
328
  );
329
}
330
```
331

332
### PolylineF Component
333

334
Functional component variant of Polyline that uses React hooks internally.
335

336
```typescript { .api }
337
/**
338
 * Functional variant of Polyline component using hooks internally
339
 */
340
function PolylineF(props: PolylineProps): JSX.Element;
341
```
342

343
### Circle Component
344

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

347
```typescript { .api }
348
/**
349
 * Draws circular shapes on the map
350
 * Supports radius configuration, styling, and interaction events
351
 */
352
interface CircleProps {
353
  options?: google.maps.CircleOptions;
354
  center?: google.maps.LatLng | google.maps.LatLngLiteral;
355
  radius?: number;
356
  draggable?: boolean;
357
  editable?: boolean;
358
  visible?: boolean;
359
  
360
  // Mouse events
361
  onClick?: (e: google.maps.MapMouseEvent) => void;
362
  onDblClick?: (e: google.maps.MapMouseEvent) => void;
363
  onDrag?: (e: google.maps.MapMouseEvent) => void;
364
  onDragEnd?: (e: google.maps.MapMouseEvent) => void;
365
  onDragStart?: (e: google.maps.MapMouseEvent) => void;
366
  onMouseDown?: (e: google.maps.MapMouseEvent) => void;
367
  onMouseMove?: (e: google.maps.MapMouseEvent) => void;
368
  onMouseOut?: (e: google.maps.MapMouseEvent) => void;
369
  onMouseOver?: (e: google.maps.MapMouseEvent) => void;
370
  onMouseUp?: (e: google.maps.MapMouseEvent) => void;
371
  onRightClick?: (e: google.maps.MapMouseEvent) => void;
372
  
373
  // Circle-specific events
374
  onCenterChanged?: () => void;
375
  onRadiusChanged?: () => void;
376
  
377
  // Lifecycle events
378
  onLoad?: (circle: google.maps.Circle) => void;
379
  onUnmount?: (circle: google.maps.Circle) => void;
380
}
381

382
function Circle(props: CircleProps): JSX.Element;
383
```
384

385
**Usage Examples:**
386

387
```typescript
388
import React, { useState } from 'react';
389
import { GoogleMap, LoadScript, Circle } from '@react-google-maps/api';
390

391
// Basic circles with different sizes
392
function BasicCircles() {
393
  const center = { lat: 40.7128, lng: -74.0060 };
394
  
395
  return (
396
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
397
      <GoogleMap
398
        center={center}
399
        zoom={11}
400
        mapContainerStyle={{ width: '100%', height: '400px' }}
401
      >
402
        {/* Small circle */}
403
        <Circle
404
          center={center}
405
          radius={1000}
406
          options={{
407
            fillColor: '#ff6b6b',
408
            fillOpacity: 0.3,
409
            strokeColor: '#ff6b6b',
410
            strokeOpacity: 0.8,
411
            strokeWeight: 2
412
          }}
413
        />
414
        
415
        {/* Medium circle */}
416
        <Circle
417
          center={{ lat: 40.7628, lng: -73.9810 }}
418
          radius={2000}
419
          options={{
420
            fillColor: '#4285f4',
421
            fillOpacity: 0.2,
422
            strokeColor: '#4285f4',
423
            strokeOpacity: 0.6,
424
            strokeWeight: 2
425
          }}
426
        />
427
      </GoogleMap>
428
    </LoadScript>
429
  );
430
}
431

432
// Interactive editable circle
433
function EditableCircle() {
434
  const [center, setCenter] = useState({ lat: 40.7128, lng: -74.0060 });
435
  const [radius, setRadius] = useState(2000);
436
  
437
  return (
438
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
439
      <div>
440
        <div style={{ padding: '10px' }}>
441
          <div>Center: {center.lat.toFixed(4)}, {center.lng.toFixed(4)}</div>
442
          <div>Radius: {radius.toFixed(0)} meters</div>
443
        </div>
444
        
445
        <GoogleMap
446
          center={center}
447
          zoom={12}
448
          mapContainerStyle={{ width: '100%', height: '400px' }}
449
        >
450
          <Circle
451
            center={center}
452
            radius={radius}
453
            editable={true}
454
            draggable={true}
455
            options={{
456
              fillColor: '#34a853',
457
              fillOpacity: 0.3,
458
              strokeColor: '#34a853',
459
              strokeOpacity: 0.8,
460
              strokeWeight: 2
461
            }}
462
            onCenterChanged={() => {
463
              // Note: In real implementation, you'd get the circle instance
464
              // and call getCenter() to get the new center
465
              console.log('Circle center changed');
466
            }}
467
            onRadiusChanged={() => {
468
              // Note: In real implementation, you'd get the circle instance
469
              // and call getRadius() to get the new radius
470
              console.log('Circle radius changed');
471
            }}
472
            onLoad={(circle) => {
473
              console.log('Circle loaded with radius:', circle.getRadius());
474
            }}
475
          />
476
        </GoogleMap>
477
      </div>
478
    </LoadScript>
479
  );
480
}
481
```
482

483
### CircleF Component
484

485
Functional component variant of Circle that uses React hooks internally.
486

487
```typescript { .api }
488
/**
489
 * Functional variant of Circle component using hooks internally
490
 */
491
function CircleF(props: CircleProps): JSX.Element;
492
```
493

494
### Rectangle Component
495

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

498
```typescript { .api }
499
/**
500
 * Draws rectangular shapes on the map
501
 * Defined by geographic bounds with interaction and editing capabilities
502
 */
503
interface RectangleProps {
504
  options?: google.maps.RectangleOptions;
505
  bounds?: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral;
506
  draggable?: boolean;
507
  editable?: boolean;
508
  visible?: boolean;
509
  
510
  // Mouse events
511
  onClick?: (e: google.maps.MapMouseEvent) => void;
512
  onDblClick?: (e: google.maps.MapMouseEvent) => void;
513
  onDrag?: (e: google.maps.MapMouseEvent) => void;
514
  onDragEnd?: (e: google.maps.MapMouseEvent) => void;
515
  onDragStart?: (e: google.maps.MapMouseEvent) => void;
516
  onMouseDown?: (e: google.maps.MapMouseEvent) => void;
517
  onMouseMove?: (e: google.maps.MapMouseEvent) => void;
518
  onMouseOut?: (e: google.maps.MapMouseEvent) => void;
519
  onMouseOver?: (e: google.maps.MapMouseEvent) => void;
520
  onMouseUp?: (e: google.maps.MapMouseEvent) => void;
521
  onRightClick?: (e: google.maps.MapMouseEvent) => void;
522
  
523
  // Rectangle-specific events
524
  onBoundsChanged?: () => void;
525
  
526
  // Lifecycle events
527
  onLoad?: (rectangle: google.maps.Rectangle) => void;
528
  onUnmount?: (rectangle: google.maps.Rectangle) => void;
529
}
530

531
function Rectangle(props: RectangleProps): JSX.Element;
532
```
533

534
**Usage Examples:**
535

536
```typescript
537
import React, { useState } from 'react';
538
import { GoogleMap, LoadScript, Rectangle } from '@react-google-maps/api';
539

540
// Basic rectangle
541
function BasicRectangle() {
542
  const bounds = {
543
    north: 40.7739,
544
    south: 40.7128,
545
    east: -73.9657,
546
    west: -74.0060
547
  };
548
  
549
  return (
550
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
551
      <GoogleMap
552
        center={{ lat: 40.7433, lng: -73.9859 }}
553
        zoom={12}
554
        mapContainerStyle={{ width: '100%', height: '400px' }}
555
      >
556
        <Rectangle
557
          bounds={bounds}
558
          options={{
559
            fillColor: '#ff6b6b',
560
            fillOpacity: 0.3,
561
            strokeColor: '#ff6b6b',
562
            strokeOpacity: 0.8,
563
            strokeWeight: 2
564
          }}
565
        />
566
      </GoogleMap>
567
    </LoadScript>
568
  );
569
}
570

571
// Editable rectangle with bounds tracking
572
function EditableRectangle() {
573
  const [bounds, setBounds] = useState({
574
    north: 40.7739,
575
    south: 40.7128,
576
    east: -73.9657,
577
    west: -74.0060
578
  });
579
  
580
  return (
581
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
582
      <div>
583
        <div style={{ padding: '10px' }}>
584
          <div>Bounds:</div>
585
          <div>North: {bounds.north.toFixed(4)}</div>
586
          <div>South: {bounds.south.toFixed(4)}</div>
587
          <div>East: {bounds.east.toFixed(4)}</div>
588
          <div>West: {bounds.west.toFixed(4)}</div>
589
        </div>
590
        
591
        <GoogleMap
592
          center={{ lat: 40.7433, lng: -73.9859 }}
593
          zoom={12}
594
          mapContainerStyle={{ width: '100%', height: '400px' }}
595
        >
596
          <Rectangle
597
            bounds={bounds}
598
            editable={true}
599
            draggable={true}
600
            options={{
601
              fillColor: '#4285f4',
602
              fillOpacity: 0.2,
603
              strokeColor: '#4285f4',
604
              strokeOpacity: 0.8,
605
              strokeWeight: 2
606
            }}
607
            onBoundsChanged={() => {
608
              console.log('Rectangle bounds changed');
609
            }}
610
            onLoad={(rectangle) => {
611
              console.log('Rectangle loaded:', rectangle.getBounds()?.toJSON());
612
            }}
613
          />
614
        </GoogleMap>
615
      </div>
616
    </LoadScript>
617
  );
618
}
619
```
620

621
### RectangleF Component
622

623
Functional component variant of Rectangle that uses React hooks internally.
624

625
```typescript { .api }
626
/**
627
 * Functional variant of Rectangle component using hooks internally
628
 */
629
function RectangleF(props: RectangleProps): JSX.Element;
630
```
631

632
### Data Component
633

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

636
```typescript { .api }
637
/**
638
 * Displays arbitrary geospatial data (GeoJSON, etc.)
639
 * Supports data loading, styling, and feature interaction
640
 */
641
interface DataProps {
642
  options?: google.maps.Data.DataOptions;
643
  
644
  // Event handlers
645
  onAddFeature?: (e: google.maps.Data.AddFeatureEvent) => void;
646
  onClick?: (e: google.maps.Data.MouseEvent) => void;
647
  onDblClick?: (e: google.maps.Data.MouseEvent) => void;
648
  onMouseDown?: (e: google.maps.Data.MouseEvent) => void;
649
  onMouseOut?: (e: google.maps.Data.MouseEvent) => void;
650
  onMouseOver?: (e: google.maps.Data.MouseEvent) => void;
651
  onMouseUp?: (e: google.maps.Data.MouseEvent) => void;
652
  onRemoveFeature?: (e: google.maps.Data.RemoveFeatureEvent) => void;
653
  onRemoveProperty?: (e: google.maps.Data.RemovePropertyEvent) => void;
654
  onRightClick?: (e: google.maps.Data.MouseEvent) => void;
655
  onSetGeometry?: (e: google.maps.Data.SetGeometryEvent) => void;
656
  onSetProperty?: (e: google.maps.Data.SetPropertyEvent) => void;
657
  
658
  // Lifecycle events
659
  onLoad?: (data: google.maps.Data) => void;
660
  onUnmount?: (data: google.maps.Data) => void;
661
}
662

663
function Data(props: DataProps): JSX.Element;
664
```
665

666
**Usage Examples:**
667

668
```typescript
669
import React from 'react';
670
import { GoogleMap, LoadScript, Data } from '@react-google-maps/api';
671

672
// GeoJSON data display
673
function GeoJSONData() {
674
  const geoJsonUrl = 'https://example.com/data.geojson';
675
  
676
  return (
677
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
678
      <GoogleMap
679
        center={{ lat: 40.7128, lng: -74.0060 }}
680
        zoom={10}
681
        mapContainerStyle={{ width: '100%', height: '400px' }}
682
      >
683
        <Data
684
          onLoad={(data) => {
685
            // Load GeoJSON data
686
            data.loadGeoJson(geoJsonUrl);
687
            
688
            // Set custom styling
689
            data.setStyle({
690
              fillColor: '#ff6b6b',
691
              fillOpacity: 0.4,
692
              strokeColor: '#ff6b6b',
693
              strokeWeight: 2
694
            });
695
          }}
696
          onClick={(e) => {
697
            console.log('Feature clicked:', e.feature.getProperty('name'));
698
          }}
699
        />
700
      </GoogleMap>
701
    </LoadScript>
702
  );
703
}
704
```
705

706
### DataF Component
707

708
Functional component variant of Data that uses React hooks internally.
709

710
```typescript { .api }
711
/**
712
 * Functional variant of Data component using hooks internally
713
 */
714
function DataF(props: DataProps): JSX.Element;
715
```
716

717
### DrawingManager Component
718

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

721
```typescript { .api }
722
/**
723
 * Provides drawing tools for creating shapes on the map
724
 * Supports multiple drawing modes and shape creation events
725
 */
726
interface DrawingManagerProps {
727
  options?: google.maps.drawing.DrawingManagerOptions;
728
  drawingMode?: google.maps.drawing.OverlayType;
729
  
730
  // Drawing events
731
  onCircleComplete?: (circle: google.maps.Circle) => void;
732
  onMarkerComplete?: (marker: google.maps.Marker) => void;
733
  onOverlayComplete?: (e: google.maps.drawing.OverlayCompleteEvent) => void;
734
  onPolygonComplete?: (polygon: google.maps.Polygon) => void;
735
  onPolylineComplete?: (polyline: google.maps.Polyline) => void;
736
  onRectangleComplete?: (rectangle: google.maps.Rectangle) => void;
737
  
738
  // Lifecycle events
739
  onLoad?: (drawingManager: google.maps.drawing.DrawingManager) => void;
740
  onUnmount?: (drawingManager: google.maps.drawing.DrawingManager) => void;
741
}
742

743
function DrawingManager(props: DrawingManagerProps): JSX.Element;
744
```
745

746
**Usage Examples:**
747

748
```typescript
749
import React, { useState } from 'react';
750
import { GoogleMap, LoadScript, DrawingManager } from '@react-google-maps/api';
751

752
// Interactive drawing tool
753
function DrawingTool() {
754
  const [drawingMode, setDrawingMode] = useState<google.maps.drawing.OverlayType | null>(null);
755
  const [shapes, setShapes] = useState<any[]>([]);
756
  
757
  const drawingManagerOptions = {
758
    drawingControl: true,
759
    drawingControlOptions: {
760
      position: google.maps.ControlPosition.TOP_CENTER,
761
      drawingModes: [
762
        google.maps.drawing.OverlayType.MARKER,
763
        google.maps.drawing.OverlayType.CIRCLE,
764
        google.maps.drawing.OverlayType.POLYGON,
765
        google.maps.drawing.OverlayType.POLYLINE,
766
        google.maps.drawing.OverlayType.RECTANGLE
767
      ]
768
    },
769
    markerOptions: {
770
      icon: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png',
771
      draggable: true
772
    },
773
    circleOptions: {
774
      fillColor: '#ff6b6b',
775
      fillOpacity: 0.3,
776
      strokeWeight: 2,
777
      clickable: false,
778
      editable: true,
779
      zIndex: 1
780
    }
781
  };
782
  
783
  const onOverlayComplete = (e: google.maps.drawing.OverlayCompleteEvent) => {
784
    const newShape = {
785
      type: e.type,
786
      overlay: e.overlay,
787
      id: Date.now()
788
    };
789
    
790
    setShapes(prev => [...prev, newShape]);
791
    console.log('Shape created:', newShape);
792
    
793
    // Reset drawing mode after creating a shape
794
    setDrawingMode(null);
795
  };
796
  
797
  return (
798
    <LoadScript googleMapsApiKey="YOUR_API_KEY" libraries={['drawing']}>
799
      <div>
800
        <div style={{ padding: '10px' }}>
801
          <div>Drawing Mode: {drawingMode || 'None'}</div>
802
          <div>Shapes Created: {shapes.length}</div>
803
          <button onClick={() => setDrawingMode(google.maps.drawing.OverlayType.POLYGON)}>
804
            Draw Polygon
805
          </button>
806
          <button onClick={() => setDrawingMode(google.maps.drawing.OverlayType.CIRCLE)}>
807
            Draw Circle
808
          </button>
809
          <button onClick={() => setDrawingMode(null)}>
810
            Stop Drawing
811
          </button>
812
        </div>
813
        
814
        <GoogleMap
815
          center={{ lat: 40.7128, lng: -74.0060 }}
816
          zoom={10}
817
          mapContainerStyle={{ width: '100%', height: '400px' }}
818
        >
819
          <DrawingManager
820
            drawingMode={drawingMode}
821
            options={drawingManagerOptions}
822
            onOverlayComplete={onOverlayComplete}
823
            onLoad={(drawingManager) => console.log('DrawingManager loaded')}
824
          />
825
        </GoogleMap>
826
      </div>
827
    </LoadScript>
828
  );
829
}
830

831
// Custom drawing controls
832
function CustomDrawingControls() {
833
  const [currentTool, setCurrentTool] = useState<string>('');
834
  
835
  return (
836
    <LoadScript googleMapsApiKey="YOUR_API_KEY" libraries={['drawing']}>
837
      <div>
838
        <div style={{ padding: '10px', background: '#f0f0f0' }}>
839
          <button 
840
            onClick={() => setCurrentTool('polygon')}
841
            style={{ marginRight: '10px' }}
842
          >
843
            Draw Area
844
          </button>
845
          <button 
846
            onClick={() => setCurrentTool('polyline')}
847
            style={{ marginRight: '10px' }}
848
          >
849
            Draw Route
850
          </button>
851
          <button 
852
            onClick={() => setCurrentTool('circle')}
853
            style={{ marginRight: '10px' }}
854
          >
855
            Draw Circle
856
          </button>
857
          <button onClick={() => setCurrentTool('')}>
858
            Stop
859
          </button>
860
          <span style={{ marginLeft: '20px' }}>
861
            Current Tool: {currentTool || 'None'}
862
          </span>
863
        </div>
864
        
865
        <GoogleMap
866
          center={{ lat: 40.7128, lng: -74.0060 }}
867
          zoom={10}
868
          mapContainerStyle={{ width: '100%', height: '400px' }}
869
        >
870
          <DrawingManager
871
            drawingMode={
872
              currentTool === 'polygon' ? google.maps.drawing.OverlayType.POLYGON :
873
              currentTool === 'polyline' ? google.maps.drawing.OverlayType.POLYLINE :
874
              currentTool === 'circle' ? google.maps.drawing.OverlayType.CIRCLE :
875
              null
876
            }
877
            options={{
878
              drawingControl: false, // Hide default controls
879
              polygonOptions: {
880
                fillColor: '#ff6b6b',
881
                fillOpacity: 0.3,
882
                strokeColor: '#ff6b6b',
883
                strokeWeight: 2,
884
                editable: true
885
              },
886
              polylineOptions: {
887
                strokeColor: '#4285f4',
888
                strokeWeight: 3
889
              },
890
              circleOptions: {
891
                fillColor: '#34a853',
892
                fillOpacity: 0.2,
893
                strokeColor: '#34a853',
894
                strokeWeight: 2,
895
                editable: true
896
              }
897
            }}
898
            onPolygonComplete={(polygon) => {
899
              console.log('Polygon completed:', polygon.getPath().getArray());
900
              setCurrentTool('');
901
            }}
902
            onPolylineComplete={(polyline) => {
903
              console.log('Polyline completed:', polyline.getPath().getArray());
904
              setCurrentTool('');
905
            }}
906
            onCircleComplete={(circle) => {
907
              console.log('Circle completed:', {
908
                center: circle.getCenter()?.toJSON(),
909
                radius: circle.getRadius()
910
              });
911
              setCurrentTool('');
912
            }}
913
          />
914
        </GoogleMap>
915
      </div>
916
    </LoadScript>
917
  );
918
}
919
```
920

921
### DrawingManagerF Component
922

923
Functional component variant of DrawingManager that uses React hooks internally.
924

925
```typescript { .api }
926
/**
927
 * Functional variant of DrawingManager component using hooks internally
928
 */
929
function DrawingManagerF(props: DrawingManagerProps): JSX.Element;
930
```