0
# Layers
1

2
Layer components for displaying additional information overlays on the map including traffic data, transit routes, bicycling paths, heatmaps, and KML/KMZ files.
3

4
## Capabilities
5

6
### TrafficLayer Component
7

8
Displays real-time traffic information on the map with customizable styling and update intervals.
9

10
```typescript { .api }
11
/**
12
 * Displays traffic information on the map
13
 * Shows real-time traffic conditions with color-coded congestion levels
14
 */
15
interface TrafficLayerProps {
16
  options?: google.maps.TrafficLayerOptions;
17
  
18
  // Lifecycle events
19
  onLoad?: (trafficLayer: google.maps.TrafficLayer) => void;
20
  onUnmount?: (trafficLayer: google.maps.TrafficLayer) => void;
21
}
22

23
function TrafficLayer(props: TrafficLayerProps): JSX.Element;
24
```
25

26
**Usage Examples:**
27

28
```typescript
29
import React, { useState } from 'react';
30
import { GoogleMap, LoadScript, TrafficLayer } from '@react-google-maps/api';
31

32
// Basic traffic layer
33
function BasicTrafficLayer() {
34
  return (
35
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
36
      <GoogleMap
37
        center={{ lat: 40.7128, lng: -74.0060 }}
38
        zoom={13}
39
        mapContainerStyle={{ width: '100%', height: '400px' }}
40
      >
41
        <TrafficLayer />
42
      </GoogleMap>
43
    </LoadScript>
44
  );
45
}
46

47
// Toggle traffic layer
48
function ToggleableTrafficLayer() {
49
  const [showTraffic, setShowTraffic] = useState(true);
50
  
51
  return (
52
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
53
      <div>
54
        <div style={{ padding: '10px' }}>
55
          <button onClick={() => setShowTraffic(!showTraffic)}>
56
            {showTraffic ? 'Hide' : 'Show'} Traffic
57
          </button>
58
        </div>
59
        
60
        <GoogleMap
61
          center={{ lat: 40.7128, lng: -74.0060 }}
62
          zoom={13}
63
          mapContainerStyle={{ width: '100%', height: '400px' }}
64
        >
65
          {showTraffic && (
66
            <TrafficLayer 
67
              onLoad={() => console.log('Traffic layer loaded')}
68
            />
69
          )}
70
        </GoogleMap>
71
      </div>
72
    </LoadScript>
73
  );
74
}
75

76
// Traffic layer with custom options
77
function CustomTrafficLayer() {
78
  const trafficOptions = {
79
    autoRefresh: true,
80
    // Additional traffic layer options can be configured here
81
  };
82
  
83
  return (
84
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
85
      <GoogleMap
86
        center={{ lat: 40.7128, lng: -74.0060 }}
87
        zoom={13}
88
        mapContainerStyle={{ width: '100%', height: '400px' }}
89
      >
90
        <TrafficLayer 
91
          options={trafficOptions}
92
          onLoad={(trafficLayer) => {
93
            console.log('Traffic layer loaded with options:', trafficOptions);
94
          }}
95
        />
96
      </GoogleMap>
97
    </LoadScript>
98
  );
99
}
100
```
101

102
### TrafficLayerF Component
103

104
Functional component variant of TrafficLayer that uses React hooks internally.
105

106
```typescript { .api }
107
/**
108
 * Functional variant of TrafficLayer component using hooks internally
109
 */
110
function TrafficLayerF(props: TrafficLayerProps): JSX.Element;
111
```
112

113
### BicyclingLayer Component
114

115
Displays bicycling routes and bike-friendly paths on the map.
116

117
```typescript { .api }
118
/**
119
 * Displays bicycling routes and paths on the map
120
 * Shows bike lanes, bike paths, and bike-friendly routes
121
 */
122
interface BicyclingLayerProps {
123
  // Lifecycle events
124
  onLoad?: (bicyclingLayer: google.maps.BicyclingLayer) => void;
125
  onUnmount?: (bicyclingLayer: google.maps.BicyclingLayer) => void;
126
}
127

128
function BicyclingLayer(props: BicyclingLayerProps): JSX.Element;
129
```
130

131
**Usage Examples:**
132

133
```typescript
134
import React, { useState } from 'react';
135
import { GoogleMap, LoadScript, BicyclingLayer } from '@react-google-maps/api';
136

137
// Basic bicycling layer
138
function BasicBicyclingLayer() {
139
  return (
140
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
141
      <GoogleMap
142
        center={{ lat: 40.7128, lng: -74.0060 }}
143
        zoom={14}
144
        mapContainerStyle={{ width: '100%', height: '400px' }}
145
      >
146
        <BicyclingLayer />
147
      </GoogleMap>
148
    </LoadScript>
149
  );
150
}
151

152
// Combined layers example
153
function CombinedTransportationLayers() {
154
  const [activeLayers, setActiveLayers] = useState({
155
    bicycling: true,
156
    traffic: false
157
  });
158
  
159
  return (
160
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
161
      <div>
162
        <div style={{ padding: '10px' }}>
163
          <label>
164
            <input
165
              type="checkbox"
166
              checked={activeLayers.bicycling}
167
              onChange={(e) => setActiveLayers(prev => ({
168
                ...prev,
169
                bicycling: e.target.checked
170
              }))}
171
            />
172
            Bicycling Routes
173
          </label>
174
          <label style={{ marginLeft: '20px' }}>
175
            <input
176
              type="checkbox"
177
              checked={activeLayers.traffic}
178
              onChange={(e) => setActiveLayers(prev => ({
179
                ...prev,
180
                traffic: e.target.checked
181
              }))}
182
            />
183
            Traffic
184
          </label>
185
        </div>
186
        
187
        <GoogleMap
188
          center={{ lat: 40.7128, lng: -74.0060 }}
189
          zoom={14}
190
          mapContainerStyle={{ width: '100%', height: '400px' }}
191
        >
192
          {activeLayers.bicycling && (
193
            <BicyclingLayer 
194
              onLoad={() => console.log('Bicycling layer loaded')}
195
            />
196
          )}
197
          {activeLayers.traffic && (
198
            <TrafficLayer 
199
              onLoad={() => console.log('Traffic layer loaded')}
200
            />
201
          )}
202
        </GoogleMap>
203
      </div>
204
    </LoadScript>
205
  );
206
}
207
```
208

209
### BicyclingLayerF Component
210

211
Functional component variant of BicyclingLayer that uses React hooks internally.
212

213
```typescript { .api }
214
/**
215
 * Functional variant of BicyclingLayer component using hooks internally
216
 */
217
function BicyclingLayerF(props: BicyclingLayerProps): JSX.Element;
218
```
219

220
### TransitLayer Component
221

222
Displays public transit information including bus routes, subway lines, and transit stops.
223

224
```typescript { .api }
225
/**
226
 * Displays public transit information on the map
227
 * Shows bus routes, subway lines, and transit stops
228
 */
229
interface TransitLayerProps {
230
  // Lifecycle events
231
  onLoad?: (transitLayer: google.maps.TransitLayer) => void;
232
  onUnmount?: (transitLayer: google.maps.TransitLayer) => void;
233
}
234

235
function TransitLayer(props: TransitLayerProps): JSX.Element;
236
```
237

238
**Usage Examples:**
239

240
```typescript
241
import React, { useState } from 'react';
242
import { 
243
  GoogleMap, 
244
  LoadScript, 
245
  TransitLayer, 
246
  TrafficLayer, 
247
  BicyclingLayer 
248
} from '@react-google-maps/api';
249

250
// Basic transit layer
251
function BasicTransitLayer() {
252
  return (
253
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
254
      <GoogleMap
255
        center={{ lat: 40.7128, lng: -74.0060 }}
256
        zoom={13}
257
        mapContainerStyle={{ width: '100%', height: '400px' }}
258
      >
259
        <TransitLayer />
260
      </GoogleMap>
261
    </LoadScript>
262
  );
263
}
264

265
// Multi-modal transportation layers
266
function MultiModalTransport() {
267
  const [layers, setLayers] = useState({
268
    transit: true,
269
    traffic: false,
270
    bicycling: false
271
  });
272
  
273
  const toggleLayer = (layerName: string) => {
274
    setLayers(prev => ({
275
      ...prev,
276
      [layerName]: !prev[layerName as keyof typeof prev]
277
    }));
278
  };
279
  
280
  return (
281
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
282
      <div>
283
        <div style={{ 
284
          padding: '10px', 
285
          background: '#f5f5f5', 
286
          borderBottom: '1px solid #ddd' 
287
        }}>
288
          <h4 style={{ margin: '0 0 10px 0' }}>Transportation Layers</h4>
289
          
290
          <button
291
            onClick={() => toggleLayer('transit')}
292
            style={{
293
              marginRight: '10px',
294
              padding: '5px 10px',
295
              backgroundColor: layers.transit ? '#4285f4' : '#fff',
296
              color: layers.transit ? 'white' : '#333',
297
              border: '1px solid #4285f4',
298
              borderRadius: '4px',
299
              cursor: 'pointer'
300
            }}
301
          >
302
            Public Transit
303
          </button>
304
          
305
          <button
306
            onClick={() => toggleLayer('traffic')}
307
            style={{
308
              marginRight: '10px',
309
              padding: '5px 10px',
310
              backgroundColor: layers.traffic ? '#ea4335' : '#fff',
311
              color: layers.traffic ? 'white' : '#333',
312
              border: '1px solid #ea4335',
313
              borderRadius: '4px',
314
              cursor: 'pointer'
315
            }}
316
          >
317
            Traffic
318
          </button>
319
          
320
          <button
321
            onClick={() => toggleLayer('bicycling')}
322
            style={{
323
              padding: '5px 10px',
324
              backgroundColor: layers.bicycling ? '#34a853' : '#fff',
325
              color: layers.bicycling ? 'white' : '#333',
326
              border: '1px solid #34a853',
327
              borderRadius: '4px',
328
              cursor: 'pointer'
329
            }}
330
          >
331
            Bicycling
332
          </button>
333
        </div>
334
        
335
        <GoogleMap
336
          center={{ lat: 40.7128, lng: -74.0060 }}
337
          zoom={13}
338
          mapContainerStyle={{ width: '100%', height: '400px' }}
339
        >
340
          {layers.transit && (
341
            <TransitLayer 
342
              onLoad={() => console.log('Transit layer loaded')}
343
            />
344
          )}
345
          {layers.traffic && (
346
            <TrafficLayer 
347
              onLoad={() => console.log('Traffic layer loaded')}
348
            />
349
          )}
350
          {layers.bicycling && (
351
            <BicyclingLayer 
352
              onLoad={() => console.log('Bicycling layer loaded')}
353
            />
354
          )}
355
        </GoogleMap>
356
      </div>
357
    </LoadScript>
358
  );
359
}
360
```
361

362
### TransitLayerF Component
363

364
Functional component variant of TransitLayer that uses React hooks internally.
365

366
```typescript { .api }
367
/**
368
 * Functional variant of TransitLayer component using hooks internally
369
 */
370
function TransitLayerF(props: TransitLayerProps): JSX.Element;
371
```
372

373
### HeatmapLayer Component
374

375
Displays data as a heatmap overlay with customizable appearance and data weighting options.
376

377
```typescript { .api }
378
/**
379
 * Displays data as a heatmap overlay
380
 * Shows density and intensity of data points using color gradients
381
 */
382
interface HeatmapLayerProps {
383
  data: google.maps.LatLng[] | google.maps.visualization.WeightedLocation[];
384
  options?: google.maps.visualization.HeatmapLayerOptions;
385
  
386
  // Lifecycle events
387
  onLoad?: (heatmapLayer: google.maps.visualization.HeatmapLayer) => void;
388
  onUnmount?: (heatmapLayer: google.maps.visualization.HeatmapLayer) => void;
389
}
390

391
function HeatmapLayer(props: HeatmapLayerProps): JSX.Element;
392
```
393

394
**Usage Examples:**
395

396
```typescript
397
import React, { useState, useMemo } from 'react';
398
import { GoogleMap, LoadScript, HeatmapLayer } from '@react-google-maps/api';
399

400
// Basic heatmap with random data
401
function BasicHeatmap() {
402
  const heatmapData = useMemo(() => {
403
    const data = [];
404
    const center = { lat: 40.7128, lng: -74.0060 };
405
    
406
    // Generate random data points around NYC
407
    for (let i = 0; i < 100; i++) {
408
      data.push(new google.maps.LatLng(
409
        center.lat + (Math.random() - 0.5) * 0.1,
410
        center.lng + (Math.random() - 0.5) * 0.1
411
      ));
412
    }
413
    
414
    return data;
415
  }, []);
416
  
417
  return (
418
    <LoadScript googleMapsApiKey="YOUR_API_KEY" libraries={['visualization']}>
419
      <GoogleMap
420
        center={{ lat: 40.7128, lng: -74.0060 }}
421
        zoom={12}
422
        mapContainerStyle={{ width: '100%', height: '400px' }}
423
      >
424
        <HeatmapLayer data={heatmapData} />
425
      </GoogleMap>
426
    </LoadScript>
427
  );
428
}
429

430
// Weighted heatmap with custom styling
431
function WeightedHeatmap() {
432
  const [radius, setRadius] = useState(20);
433
  const [opacity, setOpacity] = useState(0.6);
434
  
435
  const weightedData = useMemo(() => {
436
    const locations = [
437
      { location: new google.maps.LatLng(40.7128, -74.0060), weight: 10 },
438
      { location: new google.maps.LatLng(40.7589, -73.9851), weight: 5 },
439
      { location: new google.maps.LatLng(40.7505, -73.9934), weight: 8 },
440
      { location: new google.maps.LatLng(40.7614, -73.9776), weight: 3 },
441
      { location: new google.maps.LatLng(40.7489, -73.9680), weight: 7 }
442
    ];
443
    
444
    // Add more random weighted points
445
    for (let i = 0; i < 50; i++) {
446
      locations.push({
447
        location: new google.maps.LatLng(
448
          40.7128 + (Math.random() - 0.5) * 0.08,
449
          -74.0060 + (Math.random() - 0.5) * 0.08
450
        ),
451
        weight: Math.random() * 5 + 1
452
      });
453
    }
454
    
455
    return locations;
456
  }, []);
457
  
458
  const heatmapOptions = {
459
    radius,
460
    opacity,
461
    gradient: [
462
      'rgba(0, 255, 255, 0)',
463
      'rgba(0, 255, 255, 1)',
464
      'rgba(0, 191, 255, 1)',
465
      'rgba(0, 127, 255, 1)',
466
      'rgba(0, 63, 255, 1)',
467
      'rgba(0, 0, 255, 1)',
468
      'rgba(0, 0, 223, 1)',
469
      'rgba(0, 0, 191, 1)',
470
      'rgba(0, 0, 159, 1)',
471
      'rgba(0, 0, 127, 1)',
472
      'rgba(63, 0, 91, 1)',
473
      'rgba(127, 0, 63, 1)',
474
      'rgba(191, 0, 31, 1)',
475
      'rgba(255, 0, 0, 1)'
476
    ]
477
  };
478
  
479
  return (
480
    <LoadScript googleMapsApiKey="YOUR_API_KEY" libraries={['visualization']}>
481
      <div>
482
        <div style={{ padding: '10px', background: '#f0f0f0' }}>
483
          <div style={{ marginBottom: '10px' }}>
484
            <label>
485
              Radius: {radius}
486
              <input
487
                type="range"
488
                min="10"
489
                max="50"
490
                value={radius}
491
                onChange={(e) => setRadius(parseInt(e.target.value))}
492
                style={{ marginLeft: '10px' }}
493
              />
494
            </label>
495
          </div>
496
          
497
          <div>
498
            <label>
499
              Opacity: {opacity.toFixed(1)}
500
              <input
501
                type="range"
502
                min="0.1"
503
                max="1"
504
                step="0.1"
505
                value={opacity}
506
                onChange={(e) => setOpacity(parseFloat(e.target.value))}
507
                style={{ marginLeft: '10px' }}
508
              />
509
            </label>
510
          </div>
511
        </div>
512
        
513
        <GoogleMap
514
          center={{ lat: 40.7128, lng: -74.0060 }}
515
          zoom={12}
516
          mapContainerStyle={{ width: '100%', height: '400px' }}
517
        >
518
          <HeatmapLayer 
519
            data={weightedData}
520
            options={heatmapOptions}
521
            onLoad={() => console.log('Heatmap loaded')}
522
          />
523
        </GoogleMap>
524
      </div>
525
    </LoadScript>
526
  );
527
}
528

529
// Dynamic heatmap with data updates
530
function DynamicHeatmap() {
531
  const [dataPoints, setDataPoints] = useState<google.maps.visualization.WeightedLocation[]>([]);
532
  
533
  const addDataPoint = (lat: number, lng: number) => {
534
    const newPoint = {
535
      location: new google.maps.LatLng(lat, lng),
536
      weight: Math.random() * 10 + 1
537
    };
538
    
539
    setDataPoints(prev => [...prev, newPoint]);
540
  };
541
  
542
  const clearData = () => {
543
    setDataPoints([]);
544
  };
545
  
546
  return (
547
    <LoadScript googleMapsApiKey="YOUR_API_KEY" libraries={['visualization']}>
548
      <div>
549
        <div style={{ padding: '10px', background: '#f0f0f0' }}>
550
          <div>Data Points: {dataPoints.length}</div>
551
          <button 
552
            onClick={() => addDataPoint(
553
              40.7128 + (Math.random() - 0.5) * 0.05,
554
              -74.0060 + (Math.random() - 0.5) * 0.05
555
            )}
556
            style={{ marginRight: '10px' }}
557
          >
558
            Add Random Point
559
          </button>
560
          <button onClick={clearData}>
561
            Clear All
562
          </button>
563
        </div>
564
        
565
        <GoogleMap
566
          center={{ lat: 40.7128, lng: -74.0060 }}
567
          zoom={13}
568
          mapContainerStyle={{ width: '100%', height: '400px' }}
569
          onClick={(e) => {
570
            if (e.latLng) {
571
              addDataPoint(e.latLng.lat(), e.latLng.lng());
572
            }
573
          }}
574
        >
575
          {dataPoints.length > 0 && (
576
            <HeatmapLayer 
577
              data={dataPoints}
578
              options={{
579
                radius: 25,
580
                opacity: 0.7
581
              }}
582
            />
583
          )}
584
        </GoogleMap>
585
      </div>
586
    </LoadScript>
587
  );
588
}
589
```
590

591
### HeatmapLayerF Component
592

593
Functional component variant of HeatmapLayer that uses React hooks internally.
594

595
```typescript { .api }
596
/**
597
 * Functional variant of HeatmapLayer component using hooks internally
598
 */
599
function HeatmapLayerF(props: HeatmapLayerProps): JSX.Element;
600
```
601

602
### KmlLayer Component
603

604
Displays KML and KMZ files on the map with support for custom styling and interaction events.
605

606
```typescript { .api }
607
/**
608
 * Displays KML and KMZ files on the map
609
 * Supports remote file loading and custom styling options
610
 */
611
interface KmlLayerProps {
612
  url: string;
613
  options?: google.maps.KmlLayerOptions;
614
  
615
  // Event handlers
616
  onClick?: (e: google.maps.KmlMouseEvent) => void;
617
  onDefaultViewportChanged?: () => void;
618
  onStatusChanged?: () => void;
619
  
620
  // Lifecycle events
621
  onLoad?: (kmlLayer: google.maps.KmlLayer) => void;
622
  onUnmount?: (kmlLayer: google.maps.KmlLayer) => void;
623
}
624

625
function KmlLayer(props: KmlLayerProps): JSX.Element;
626
```
627

628
**Usage Examples:**
629

630
```typescript
631
import React, { useState } from 'react';
632
import { GoogleMap, LoadScript, KmlLayer } from '@react-google-maps/api';
633

634
// Basic KML layer
635
function BasicKmlLayer() {
636
  const kmlUrl = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
637
  
638
  return (
639
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
640
      <GoogleMap
641
        center={{ lat: 37.4419, lng: -122.1419 }}
642
        zoom={13}
643
        mapContainerStyle={{ width: '100%', height: '400px' }}
644
      >
645
        <KmlLayer
646
          url={kmlUrl}
647
          onLoad={() => console.log('KML layer loaded')}
648
          onClick={(e) => {
649
            console.log('KML feature clicked:', e.featureData);
650
          }}
651
        />
652
      </GoogleMap>
653
    </LoadScript>
654
  );
655
}
656

657
// Multiple KML layers with controls
658
function MultipleKmlLayers() {
659
  const [activeLayers, setActiveLayers] = useState({
660
    layer1: true,
661
    layer2: false,
662
    layer3: false
663
  });
664
  
665
  const kmlLayers = [
666
    {
667
      id: 'layer1',
668
      name: 'Campus Buildings',
669
      url: 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml'
670
    },
671
    {
672
      id: 'layer2', 
673
      name: 'Parking Areas',
674
      url: 'https://example.com/parking.kml'
675
    },
676
    {
677
      id: 'layer3',
678
      name: 'Walking Paths',
679
      url: 'https://example.com/paths.kml'
680
    }
681
  ];
682
  
683
  const toggleLayer = (layerId: string) => {
684
    setActiveLayers(prev => ({
685
      ...prev,
686
      [layerId]: !prev[layerId as keyof typeof prev]
687
    }));
688
  };
689
  
690
  return (
691
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
692
      <div>
693
        <div style={{ padding: '10px', background: '#f0f0f0' }}>
694
          <h4>KML Layers</h4>
695
          {kmlLayers.map(layer => (
696
            <div key={layer.id} style={{ marginBottom: '5px' }}>
697
              <label>
698
                <input
699
                  type="checkbox"
700
                  checked={activeLayers[layer.id as keyof typeof activeLayers]}
701
                  onChange={() => toggleLayer(layer.id)}
702
                />
703
                {layer.name}
704
              </label>
705
            </div>
706
          ))}
707
        </div>
708
        
709
        <GoogleMap
710
          center={{ lat: 37.4419, lng: -122.1419 }}
711
          zoom={13}
712
          mapContainerStyle={{ width: '100%', height: '400px' }}
713
        >
714
          {kmlLayers.map(layer => 
715
            activeLayers[layer.id as keyof typeof activeLayers] && (
716
              <KmlLayer
717
                key={layer.id}
718
                url={layer.url}
719
                options={{
720
                  suppressInfoWindows: false,
721
                  preserveViewport: true
722
                }}
723
                onLoad={() => console.log(`${layer.name} loaded`)}
724
                onClick={(e) => console.log(`${layer.name} feature clicked:`, e)}
725
                onStatusChanged={() => console.log(`${layer.name} status changed`)}
726
              />
727
            )
728
          )}
729
        </GoogleMap>
730
      </div>
731
    </LoadScript>
732
  );
733
}
734

735
// KML layer with error handling
736
function KmlLayerWithErrorHandling() {
737
  const [kmlUrl, setKmlUrl] = useState('');
738
  const [layerStatus, setLayerStatus] = useState('');
739
  const [loadedLayer, setLoadedLayer] = useState<google.maps.KmlLayer | null>(null);
740
  
741
  const loadKmlFile = () => {
742
    if (!kmlUrl.trim()) {
743
      alert('Please enter a KML URL');
744
      return;
745
    }
746
    setLayerStatus('Loading...');
747
  };
748
  
749
  return (
750
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
751
      <div>
752
        <div style={{ padding: '10px', background: '#f0f0f0' }}>
753
          <div style={{ marginBottom: '10px' }}>
754
            <input
755
              type="text"
756
              placeholder="Enter KML URL"
757
              value={kmlUrl}
758
              onChange={(e) => setKmlUrl(e.target.value)}
759
              style={{ width: '300px', marginRight: '10px' }}
760
            />
761
            <button onClick={loadKmlFile}>Load KML</button>
762
          </div>
763
          
764
          {layerStatus && (
765
            <div>Status: {layerStatus}</div>
766
          )}
767
        </div>
768
        
769
        <GoogleMap
770
          center={{ lat: 40.7128, lng: -74.0060 }}
771
          zoom={10}
772
          mapContainerStyle={{ width: '100%', height: '400px' }}
773
        >
774
          {kmlUrl && (
775
            <KmlLayer
776
              url={kmlUrl}
777
              onLoad={(kmlLayer) => {
778
                setLoadedLayer(kmlLayer);
779
                setLayerStatus('Loaded successfully');
780
                console.log('KML layer loaded:', kmlLayer.getUrl());
781
              }}
782
              onStatusChanged={() => {
783
                if (loadedLayer) {
784
                  const status = loadedLayer.getStatus();
785
                  setLayerStatus(`Status: ${status}`);
786
                  
787
                  if (status === google.maps.KmlLayerStatus.INVALID_DOCUMENT) {
788
                    setLayerStatus('Error: Invalid KML document');
789
                  } else if (status === google.maps.KmlLayerStatus.DOCUMENT_NOT_FOUND) {
790
                    setLayerStatus('Error: KML document not found');
791
                  } else if (status === google.maps.KmlLayerStatus.FETCH_ERROR) {
792
                    setLayerStatus('Error: Failed to fetch KML document');
793
                  }
794
                }
795
              }}
796
              onClick={(e) => {
797
                console.log('KML feature clicked:', {
798
                  featureData: e.featureData,
799
                  pixelOffset: e.pixelOffset
800
                });
801
              }}
802
            />
803
          )}
804
        </GoogleMap>
805
      </div>
806
    </LoadScript>
807
  );
808
}
809
```
810

811
### Layer Management Best Practices
812

813
Guidelines for effectively combining and managing multiple map layers.
814

815
```typescript { .api }
816
/**
817
 * Best practices for layer management
818
 */
819
interface LayerManagerProps {
820
  children: React.ReactNode;
821
  maxConcurrentLayers?: number;
822
  onLayerLimitExceeded?: (layerCount: number) => void;
823
}
824

825
// Example layer management patterns
826
const LayerManager = ({ children, maxConcurrentLayers = 5 }: LayerManagerProps) => {
827
  const [activeLayers, setActiveLayers] = React.useState<string[]>([]);
828
  
829
  const addLayer = (layerId: string) => {
830
    if (activeLayers.length >= maxConcurrentLayers) {
831
      console.warn('Maximum layer limit reached');
832
      return false;
833
    }
834
    setActiveLayers(prev => [...prev, layerId]);
835
    return true;
836
  };
837
  
838
  const removeLayer = (layerId: string) => {
839
    setActiveLayers(prev => prev.filter(id => id !== layerId));
840
  };
841
  
842
  return <>{children}</>;
843
};
844
```
845

846
**Layer Performance Examples:**
847

848
```typescript
849
// Optimized layer switching
850
function OptimizedLayerSwitching() {
851
  const [activeTransportLayer, setActiveTransportLayer] = useState<'traffic' | 'transit' | 'bicycling' | null>('traffic');
852
  
853
  return (
854
    <LoadScript googleMapsApiKey="YOUR_API_KEY" libraries={['visualization']}>
855
      <div>
856
        <div style={{ padding: '10px' }}>
857
          <select 
858
            value={activeTransportLayer || ''} 
859
            onChange={(e) => setActiveTransportLayer(e.target.value as any || null)}
860
          >
861
            <option value="">No Transport Layer</option>
862
            <option value="traffic">Traffic</option>
863
            <option value="transit">Transit</option>
864
            <option value="bicycling">Bicycling</option>
865
          </select>
866
        </div>
867
        
868
        <GoogleMap
869
          center={{ lat: 40.7128, lng: -74.0060 }}
870
          zoom={13}
871
          mapContainerStyle={{ width: '100%', height: '400px' }}
872
        >
873
          {activeTransportLayer === 'traffic' && <TrafficLayer />}
874
          {activeTransportLayer === 'transit' && <TransitLayer />}
875
          {activeTransportLayer === 'bicycling' && <BicyclingLayer />}
876
        </GoogleMap>
877
      </div>
878
    </LoadScript>
879
  );
880
}
881
```