0
# Map Layers
1

2
Layer components for displaying additional information on Google Maps including traffic data, bicycling routes, KML/KMZ files, Fusion Tables data, and ground overlays.
3

4
## Capabilities
5

6
### TrafficLayer
7

8
Component for displaying real-time traffic information on the map.
9

10
```javascript { .api }
11
/**
12
 * Traffic layer component showing real-time traffic conditions
13
 */
14
class TrafficLayer extends Component<TrafficLayerProps> {}
15

16
interface TrafficLayerProps {
17
  // Default props
18
  defaultOptions?: google.maps.TrafficLayerOptions;
19
  
20
  // Controlled props
21
  options?: google.maps.TrafficLayerOptions;
22
}
23
```
24

25
**Usage Example:**
26

27
```javascript
28
import { TrafficLayer } from "react-google-maps";
29

30
<GoogleMap defaultZoom={10} defaultCenter={{ lat: 37.7749, lng: -122.4194 }}>
31
  <TrafficLayer />
32
</GoogleMap>
33
```
34

35
### BicyclingLayer
36

37
Component for displaying bicycling route information and bike-friendly paths.
38

39
```javascript { .api }
40
/**
41
 * Bicycling layer component showing bike routes and paths
42
 */
43
class BicyclingLayer extends Component<BicyclingLayerProps> {}
44

45
interface BicyclingLayerProps {
46
  // No specific props - uses default Google Maps bicycling layer
47
}
48
```
49

50
**Usage Example:**
51

52
```javascript
53
import { BicyclingLayer } from "react-google-maps";
54

55
<GoogleMap defaultZoom={12} defaultCenter={{ lat: 37.7749, lng: -122.4194 }}>
56
  <BicyclingLayer />
57
</GoogleMap>
58
```
59

60
### KmlLayer
61

62
Component for displaying KML and KMZ files on the map with support for custom styling and interaction.
63

64
```javascript { .api }
65
/**
66
 * KML/KMZ layer component for displaying geographic data files
67
 */
68
class KmlLayer extends Component<KmlLayerProps> {
69
  /** Returns the default viewport for the KML layer */
70
  getDefaultViewport(): google.maps.LatLngBounds;
71
  /** Returns metadata about the KML layer */
72
  getMetadata(): google.maps.KmlLayerMetadata;
73
  /** Returns the current status of the KML layer */
74
  getStatus(): google.maps.KmlLayerStatus;
75
  /** Returns the URL of the KML file */
76
  getUrl(): string;
77
  /** Returns the z-index of the layer */
78
  getZIndex(): number;
79
}
80

81
interface KmlLayerProps {
82
  // Default props
83
  defaultOptions?: google.maps.KmlLayerOptions;
84
  defaultUrl?: string;
85
  defaultZIndex?: number;
86
  
87
  // Controlled props
88
  options?: google.maps.KmlLayerOptions;
89
  url?: string;
90
  zIndex?: number;
91
  
92
  // Event handlers
93
  onDefaultViewportChanged?(): void;
94
  onClick?(e: google.maps.KmlMouseEvent): void;
95
  onStatusChanged?(): void;
96
}
97
```
98

99
**Usage Example:**
100

101
```javascript
102
import { KmlLayer } from "react-google-maps";
103

104
<GoogleMap defaultZoom={10} defaultCenter={{ lat: 37.7749, lng: -122.4194 }}>
105
  <KmlLayer
106
    url="https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml"
107
    options={{
108
      suppressInfoWindows: false,
109
      preserveViewport: false,
110
      screenOverlays: true
111
    }}
112
    onClick={(event) => {
113
      console.log("KML feature clicked:", event.featureData);
114
    }}
115
    onStatusChanged={() => {
116
      console.log("KML layer status changed");
117
    }}
118
  />
119
</GoogleMap>
120
```
121

122
### FusionTablesLayer
123

124
Component for displaying Google Fusion Tables data (deprecated by Google but still supported).
125

126
```javascript { .api }
127
/**
128
 * Fusion Tables layer component (deprecated by Google)
129
 */
130
class FusionTablesLayer extends Component<FusionTablesLayerProps> {}
131

132
interface FusionTablesLayerProps {
133
  // Default props
134
  defaultOptions?: google.maps.FusionTablesLayerOptions;
135
  
136
  // Controlled props
137
  options?: google.maps.FusionTablesLayerOptions;
138
  
139
  // Event handlers
140
  onClick?(e: google.maps.FusionTablesMouseEvent): void;
141
}
142
```
143

144
**Usage Example:**
145

146
```javascript
147
import { FusionTablesLayer } from "react-google-maps";
148

149
<GoogleMap defaultZoom={10} defaultCenter={{ lat: 37.7749, lng: -122.4194 }}>
150
  <FusionTablesLayer
151
    options={{
152
      query: {
153
        select: "geometry",
154
        from: "1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg"
155
      },
156
      styles: [{
157
        polygonOptions: {
158
          fillColor: "#00FF00",
159
          fillOpacity: 0.3
160
        }
161
      }]
162
    }}
163
    onClick={(event) => {
164
      console.log("Fusion Table clicked:", event.row);
165
    }}
166
  />
167
</GoogleMap>
168
```
169

170
### GroundOverlay
171

172
Component for displaying images as overlays on the map, anchored to specific geographic coordinates.
173

174
```javascript { .api }
175
/**
176
 * Ground overlay component for displaying images on the map
177
 */
178
class GroundOverlay extends Component<GroundOverlayProps> {
179
  /** Returns the overlay's bounds */
180
  getBounds(): google.maps.LatLngBounds;
181
  /** Returns the overlay's opacity */
182
  getOpacity(): number;
183
  /** Returns the overlay's image URL */
184
  getUrl(): string;
185
}
186

187
interface GroundOverlayProps {
188
  // Required props
189
  /** Geographic bounds where the image should be positioned */
190
  bounds: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral;
191
  /** URL of the image to display */
192
  url: string;
193
  
194
  // Optional props
195
  options?: google.maps.GroundOverlayOptions;
196
}
197
```
198

199
**Usage Example:**
200

201
```javascript
202
import { GroundOverlay } from "react-google-maps";
203

204
const imageBounds = {
205
  north: 40.773941,
206
  south: 40.712216,
207
  east: -74.12544,
208
  west: -74.22655,
209
};
210

211
<GoogleMap defaultZoom={13} defaultCenter={{ lat: 40.74, lng: -74.18 }}>
212
  <GroundOverlay
213
    url="https://developers.google.com/maps/documentation/javascript/examples/full/images/newark_nj_1922.jpg"
214
    bounds={imageBounds}
215
    options={{
216
      opacity: 0.75,
217
      clickable: true
218
    }}
219
  />
220
</GoogleMap>
221
```
222

223
## Layer Management Patterns
224

225
### Conditional Layer Display
226

227
Control layer visibility based on application state:
228

229
```javascript
230
const [showTraffic, setShowTraffic] = useState(false);
231
const [showBiking, setShowBiking] = useState(false);
232

233
<GoogleMap defaultZoom={10} defaultCenter={{ lat: 37.7749, lng: -122.4194 }}>
234
  {showTraffic && <TrafficLayer />}
235
  {showBiking && <BicyclingLayer />}
236
  
237
  <button onClick={() => setShowTraffic(!showTraffic)}>
238
    Toggle Traffic
239
  </button>
240
  <button onClick={() => setShowBiking(!showBiking)}>
241
    Toggle Biking
242
  </button>
243
</GoogleMap>
244
```
245

246
### Multiple KML Layers
247

248
Display multiple KML files with different styling:
249

250
```javascript
251
const kmlLayers = [
252
  {
253
    url: "https://example.com/layer1.kml",
254
    options: { suppressInfoWindows: false }
255
  },
256
  {
257
    url: "https://example.com/layer2.kml", 
258
    options: { suppressInfoWindows: true }
259
  }
260
];
261

262
<GoogleMap defaultZoom={10} defaultCenter={{ lat: 37.7749, lng: -122.4194 }}>
263
  {kmlLayers.map((layer, index) => (
264
    <KmlLayer
265
      key={index}
266
      url={layer.url}
267
      options={layer.options}
268
      zIndex={index}
269
    />
270
  ))}
271
</GoogleMap>
272
```
273

274
### Ground Overlay with Controls
275

276
Interactive ground overlay with opacity control:
277

278
```javascript
279
const [overlayOpacity, setOverlayOpacity] = useState(0.75);
280

281
<GoogleMap defaultZoom={13} defaultCenter={{ lat: 40.74, lng: -74.18 }}>
282
  <GroundOverlay
283
    url="https://example.com/overlay.jpg"
284
    bounds={imageBounds}
285
    options={{ opacity: overlayOpacity }}
286
  />
287
  
288
  <input
289
    type="range"
290
    min="0"
291
    max="1"
292
    step="0.1"
293
    value={overlayOpacity}
294
    onChange={(e) => setOverlayOpacity(parseFloat(e.target.value))}
295
  />
296
</GoogleMap>
297
```