0
# Higher-Order Components
1

2
React Google Maps provides two essential higher-order components (HOCs) that handle Google Maps JavaScript API script loading and provide map context to your components.
3

4
## Capabilities
5

6
### withScriptjs
7

8
HOC for loading the Google Maps JavaScript API script asynchronously and providing loading state management.
9

10
```javascript { .api }
11
/**
12
 * Higher-order component for loading Google Maps JavaScript API script
13
 * @param wrappedComponent - Component to wrap with script loading functionality
14
 * @returns Enhanced component with script loading props
15
 */
16
function withScriptjs<P>(wrappedComponent: ComponentClass<P>): ComponentClass<P & WithScriptjsProps>;
17

18
interface WithScriptjsProps {
19
  /** Google Maps API URL with API key and libraries */
20
  googleMapURL: string;
21
  /** Element to show while script is loading */
22
  loadingElement: ReactElement<any>;
23
}
24
```
25

26
**Usage Example:**
27

28
```javascript
29
import { withScriptjs, GoogleMap } from "react-google-maps";
30

31
const MapWithScript = withScriptjs((props) => (
32
  <div>
33
    {/* Your map component here */}
34
    <GoogleMap defaultZoom={8} defaultCenter={{ lat: 37.7749, lng: -122.4194 }} />
35
  </div>
36
));
37

38
// Usage
39
<MapWithScript
40
  googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${API_KEY}&libraries=geometry,drawing,places`}
41
  loadingElement={<div style={{ height: "400px" }}>Loading...</div>}
42
/>
43
```
44

45
### withGoogleMap
46

47
HOC for providing Google Maps context and container management to wrapped components.
48

49
```javascript { .api }
50
/**
51
 * Higher-order component for wrapping components with GoogleMap functionality
52
 * @param wrappedComponent - Component to wrap with Google Map context
53
 * @returns Enhanced component with Google Map props
54
 */
55
function withGoogleMap<P>(wrappedComponent: ComponentClass<P>): ComponentClass<P & WithGoogleMapProps>;
56

57
interface WithGoogleMapProps {
58
  /** Container element for the map component */
59
  containerElement: ReactElement<any>;
60
  /** Map element where Google Map will be rendered */
61
  mapElement: ReactElement<any>;
62
}
63
```
64

65
**Usage Example:**
66

67
```javascript
68
import { withGoogleMap, GoogleMap, Marker } from "react-google-maps";
69

70
const MapComponent = withGoogleMap((props) => (
71
  <GoogleMap
72
    defaultZoom={props.zoom || 8}
73
    defaultCenter={props.center || { lat: 37.7749, lng: -122.4194 }}
74
  >
75
    {props.markers.map((marker, index) => (
76
      <Marker key={index} position={marker.position} title={marker.title} />
77
    ))}
78
  </GoogleMap>
79
));
80

81
// Usage
82
<MapComponent
83
  containerElement={<div style={{ height: "400px", width: "100%" }} />}
84
  mapElement={<div style={{ height: "100%" }} />}
85
  zoom={10}
86
  center={{ lat: 37.7749, lng: -122.4194 }}
87
  markers={[
88
    { position: { lat: 37.7749, lng: -122.4194 }, title: "San Francisco" }
89
  ]}
90
/>
91
```
92

93
### Composing Both HOCs
94

95
The typical pattern is to compose both HOCs together for complete functionality:
96

97
```javascript
98
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps";
99

100
const MyMapComponent = withScriptjs(withGoogleMap((props) => (
101
  <GoogleMap
102
    defaultZoom={8}
103
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
104
  >
105
    <Marker position={{ lat: -34.397, lng: 150.644 }} />
106
  </GoogleMap>
107
)));
108

109
// Usage with both HOCs
110
<MyMapComponent
111
  googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${API_KEY}&libraries=geometry,drawing,places`}
112
  loadingElement={<div style={{ height: "100%" }} />}
113
  containerElement={<div style={{ height: "400px" }} />}
114
  mapElement={<div style={{ height: "100%" }} />}
115
/>
116
```
117

118
## Google Maps API URL Configuration
119

120
The `googleMapURL` prop should include:
121

122
- Your Google Maps API key
123
- Required libraries (geometry, drawing, places, visualization)
124
- Optional parameters (language, region, etc.)
125

126
**Example URLs:**
127

128
```javascript
129
// Basic configuration
130
const basicURL = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}`;
131

132
// With libraries
133
const withLibraries = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}&libraries=geometry,drawing,places,visualization`;
134

135
// With additional parameters
136
const fullURL = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}&libraries=geometry,drawing,places&language=en&region=US`;
137
```