0
# React Google Maps
1

2
React Google Maps is a comprehensive React.js integration library for Google Maps that provides a rich set of React components wrapping the Google Maps JavaScript API. It offers higher-order components (HOCs), map overlays, layers, and advanced features like marker clustering, drawing tools, and places search functionality.
3

4
## Package Information
5

6
- **Package Name**: react-google-maps
7
- **Package Type**: npm
8
- **Language**: JavaScript/React
9
- **Installation**: `npm install react-google-maps`
10

11
## Core Imports
12

13
```javascript
14
import { 
15
  GoogleMap, 
16
  Marker, 
17
  InfoWindow, 
18
  withGoogleMap, 
19
  withScriptjs 
20
} from "react-google-maps";
21
```
22

23
For CommonJS:
24

25
```javascript
26
const { 
27
  GoogleMap, 
28
  Marker, 
29
  InfoWindow, 
30
  withGoogleMap, 
31
  withScriptjs 
32
} = require("react-google-maps");
33
```
34

35
## Basic Usage
36

37
```javascript
38
import React from "react";
39
import { 
40
  GoogleMap, 
41
  Marker, 
42
  withScriptjs, 
43
  withGoogleMap 
44
} from "react-google-maps";
45

46
const MapComponent = withScriptjs(withGoogleMap((props) => (
47
  <GoogleMap
48
    defaultZoom={8}
49
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
50
  >
51
    <Marker position={{ lat: -34.397, lng: 150.644 }} />
52
  </GoogleMap>
53
)));
54

55
// Usage
56
<MapComponent
57
  googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${API_KEY}&libraries=geometry,drawing,places`}
58
  loadingElement={<div style={{ height: `100%` }} />}
59
  containerElement={<div style={{ height: `400px` }} />}
60
  mapElement={<div style={{ height: `100%` }} />}
61
/>
62
```
63

64
## Architecture
65

66
React Google Maps is built around several core patterns:
67

68
- **Higher-Order Components (HOCs)**: `withScriptjs` and `withGoogleMap` provide script loading and map context
69
- **React Components**: Direct wrappers for Google Maps API objects (GoogleMap, Marker, etc.)
70
- **Recompose Pattern**: Uses recompose library for functional composition of HOCs
71
- **Event Handling**: React-style props for Google Maps events (onClick, onDragEnd, etc.)
72
- **Addon System**: Extensible architecture supporting InfoBox, MarkerClusterer, and other third-party enhancements
73

74
## Capabilities
75

76
### Higher-Order Components
77

78
Core HOCs for script loading and map context that wrap your components to provide Google Maps functionality.
79

80
```javascript { .api }
81
function withScriptjs<P>(wrappedComponent: ComponentClass<P>): ComponentClass<P & WithScriptjsProps>;
82
function withGoogleMap<P>(wrappedComponent: ComponentClass<P>): ComponentClass<P & WithGoogleMapProps>;
83

84
interface WithScriptjsProps {
85
  googleMapURL: string;
86
  loadingElement: ReactElement<any>;
87
}
88

89
interface WithGoogleMapProps {
90
  containerElement: ReactElement<any>;
91
  mapElement: ReactElement<any>;
92
}
93
```
94

95
[Higher-Order Components](./hocs.md)
96

97
### Core Map Components
98

99
Essential components for rendering Google Maps, markers, and info windows in React applications.
100

101
```javascript { .api }
102
class GoogleMap extends Component<GoogleMapProps> {
103
  fitBounds(bounds: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral): void;
104
  panBy(x: number, y: number): void;
105
  panTo(latLng: google.maps.LatLng | google.maps.LatLngLiteral): void;
106
  panToBounds(latLngBounds: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral): void;
107
  getBounds(): google.maps.LatLngBounds;
108
  getCenter(): google.maps.LatLng;
109
  getClickableIcons(): boolean;
110
  getDiv(): Element;
111
  getHeading(): number;
112
  getMapTypeId(): google.maps.MapTypeId | string;
113
  getProjection(): google.maps.Projection;
114
  getStreetView(): google.maps.StreetViewPanorama;
115
  getTilt(): number;
116
  getZoom(): number;
117
}
118

119
class Marker extends Component<MarkerProps> {
120
  getPosition(): google.maps.LatLng;
121
  getTitle(): string;
122
  getVisible(): boolean;
123
}
124

125
class InfoWindow extends Component<InfoWindowProps> {
126
  getPosition(): google.maps.LatLng;
127
  getZIndex(): number;
128
}
129
```
130

131
[Core Map Components](./core-components.md)
132

133
### Shape Overlays
134

135
Geometric shape components for drawing circles, polygons, polylines, and rectangles on maps.
136

137
```javascript { .api }
138
class Circle extends Component<CircleProps> {
139
  getBounds(): google.maps.LatLngBounds;
140
  getCenter(): google.maps.LatLng;
141
  getRadius(): number;
142
}
143

144
class Polygon extends Component<PolygonProps> {
145
  getDraggable(): boolean;
146
  getPath(): google.maps.MVCArray<google.maps.LatLng>;
147
  getPaths(): google.maps.MVCArray<google.maps.MVCArray<google.maps.LatLng>>;
148
}
149

150
class Polyline extends Component<PolylineProps> {
151
  getPath(): google.maps.MVCArray<google.maps.LatLng>;
152
}
153

154
class Rectangle extends Component<RectangleProps> {
155
  getBounds(): google.maps.LatLngBounds;
156
}
157
```
158

159
[Shape Overlays](./shapes.md)
160

161
### Map Layers
162

163
Layer components for displaying traffic, bicycling routes, KML data, and other overlay information.
164

165
```javascript { .api }
166
class TrafficLayer extends Component<TrafficLayerProps> {}
167
class BicyclingLayer extends Component<BicyclingLayerProps> {}
168
class KmlLayer extends Component<KmlLayerProps> {
169
  getDefaultViewport(): google.maps.LatLngBounds;
170
  getMetadata(): google.maps.KmlLayerMetadata;
171
  getStatus(): google.maps.KmlLayerStatus;
172
  getUrl(): string;
173
}
174
class FusionTablesLayer extends Component<FusionTablesLayerProps> {}
175
class GroundOverlay extends Component<GroundOverlayProps> {
176
  getBounds(): google.maps.LatLngBounds;
177
  getOpacity(): number;
178
  getUrl(): string;
179
}
180
```
181

182
[Map Layers](./layers.md)
183

184
### Advanced Components
185

186
Specialized components for custom overlays, directions, Street View, and advanced Google Maps features.
187

188
```javascript { .api }
189
class OverlayView extends Component<OverlayViewProps> {
190
  static FLOAT_PANE: string;
191
  static MAP_PANE: string;
192
  static MARKER_LAYER: string;
193
  static OVERLAY_LAYER: string;
194
  static OVERLAY_MOUSE_TARGET: string;
195
  
196
  getPanes(): google.maps.MapPanes;
197
  getProjection(): google.maps.MapCanvasProjection;
198
}
199

200
class DirectionsRenderer extends Component<DirectionsRendererProps> {
201
  getDirections(): google.maps.DirectionsResult;
202
  getPanel(): Node;
203
  getRouteIndex(): number;
204
}
205

206
class StreetViewPanorama extends Component<StreetViewPanoramaProps> {
207
  getLinks(): google.maps.StreetViewLink[];
208
  getLocation(): google.maps.StreetViewLocation;
209
  getPosition(): google.maps.LatLng;
210
  getPov(): google.maps.StreetViewPov;
211
}
212
```
213

214
[Advanced Components](./advanced.md)
215

216
### Addon Extensions
217

218
Third-party addon components for enhanced functionality like marker clustering, custom info boxes, and labeled markers.
219

220
```javascript { .api }
221
class InfoBox extends Component<InfoBoxProps> {}
222
class MarkerClusterer extends Component<MarkerClustererProps> {}
223
class MarkerWithLabel extends Component<MarkerProps> {}
224
```
225

226
[Addon Extensions](./addons.md)
227

228
### Places & Search
229

230
Google Places API integration for location search, autocomplete functionality, and place details.
231

232
```javascript { .api }
233
class SearchBox extends Component<SearchBoxProps> {
234
  getBounds(): google.maps.LatLngBounds;
235
  getPlaces(): google.maps.places.PlaceResult[];
236
}
237

238
class StandaloneSearchBox extends Component<StandaloneSearchBoxProps> {
239
  getBounds(): google.maps.LatLngBounds;
240
  getPlaces(): google.maps.places.PlaceResult[];
241
}
242
```
243

244
[Places & Search](./places.md)
245

246
### Drawing Tools
247

248
Google Maps drawing tools for creating and editing geometric shapes interactively on the map.
249

250
```javascript { .api }
251
class DrawingManager extends Component<DrawingManagerProps> {
252
  getDrawingMode(): google.maps.drawing.OverlayType;
253
}
254
```
255

256
[Drawing Tools](./drawing.md)
257

258
### Visualization
259

260
Data visualization components for displaying heatmaps and other visual representations of geographic data.
261

262
```javascript { .api }
263
class HeatmapLayer extends Component<HeatmapLayerProps> {
264
  getData(): google.maps.MVCArray<google.maps.LatLng | google.maps.visualization.WeightedLocation>;
265
}
266
```
267

268
[Visualization](./visualization.md)