1 | ## GoogleMap API
|
2 |
|
3 | ### parameters
|
4 |
|
5 | #### apiKey (string) (_Deprecated use bootstrapURLKeys_)
|
6 |
|
7 | Google maps api key. (Optional, but your map will be rate-limited with no key)
|
8 |
|
9 | #### bootstrapURLKeys (object)
|
10 |
|
11 | Example:
|
12 |
|
13 | ```javascript
|
14 | <GoogleMap
|
15 | bootstrapURLKeys={{
|
16 | key: API_KEY,
|
17 | language: 'ru',
|
18 | region: 'ru',
|
19 | ...otherUrlParams,
|
20 | }}
|
21 | >
|
22 | ```
|
23 |
|
24 | #### defaultCenter (array or object)
|
25 |
|
26 | `[lat, lng]` or `{ lat: lat, lng: lng}`
|
27 | Default lat/lng at which to center the map - changing this prop throws a warning
|
28 |
|
29 | #### center (array or object)
|
30 |
|
31 | `[lat, lng]` or `{ lat: lat, lng: lng}`
|
32 | Lat/lng at which to center the map
|
33 |
|
34 | #### defaultZoom: (number)
|
35 |
|
36 | Default map zoom level - changing this prop throws a warning
|
37 |
|
38 | #### zoom (number)
|
39 |
|
40 | Map zoom level
|
41 |
|
42 | #### hoverDistance (number)
|
43 |
|
44 | Default: 30
|
45 |
|
46 | #### margin (array)
|
47 |
|
48 | In onChange callback, gives you a marginBounds argument property, where lat lng will be shifted using margin you have set. For example, you could use a simple check pointInRect to not show Markers near map bounds.
|
49 |
|
50 | #### debounced (bool)
|
51 |
|
52 | Default: true
|
53 |
|
54 | #### layerTypes (string[])
|
55 |
|
56 | You can add some "layers" for map like a
|
57 | [traffic](https://developers.google.com/maps/documentation/javascript/examples/layer-traffic) or
|
58 | [transit](https://developers.google.com/maps/documentation/javascript/examples/layer-transit)
|
59 |
|
60 | ```javascript
|
61 | layerTypes={['TrafficLayer', 'TransitLayer']}
|
62 | ```
|
63 |
|
64 | ### callbacks
|
65 |
|
66 | #### options (func|object)
|
67 |
|
68 | Set map options such as controls positions / styles, etc.
|
69 |
|
70 | Example:
|
71 |
|
72 | ```javascript
|
73 | createMapOptions: function (maps) {
|
74 | return {
|
75 | panControl: false,
|
76 | mapTypeControl: false,
|
77 | scrollwheel: false,
|
78 | styles: [{ stylers: [{ 'saturation': -100 }, { 'gamma': 0.8 }, { 'lightness': 4 }, { 'visibility': 'on' }] }]
|
79 | }
|
80 | }
|
81 |
|
82 | <GoogleMap options={createMapOptions} ... />
|
83 | ```
|
84 | See "Custom map options example" in Examples below for a further example.
|
85 | See full options at [Google Maps Javascript API docs](https://developers.google.com/maps/documentation/javascript/controls#ControlOptions)
|
86 |
|
87 | #### onClick (func)
|
88 |
|
89 | ```
|
90 | ({ x, y, lat, lng, event })
|
91 | ```
|
92 |
|
93 | The `event` prop in args is the outer div onClick event, not the gmap-api 'click' event.
|
94 |
|
95 | Example:
|
96 |
|
97 | ```javascript
|
98 | _onClick = ({x, y, lat, lng, event}) => console.log(x, y, lat, lng, event)
|
99 | // ES5 users
|
100 | function _onClick(obj){ console.log(obj.x, obj.y, obj.lat, obj.lng, obj.event);}
|
101 |
|
102 | <GoogleMap onClick={_onClick} ... />
|
103 | ```
|
104 |
|
105 | #### onBoundsChange (func) (_Deprecated use onChange_)
|
106 |
|
107 | ```
|
108 | ({ center, zoom, bounds, marginBounds })
|
109 | ```
|
110 | ```
|
111 | [lat, lng] = center;
|
112 | [topLat, leftLng, bottomLat, rightLng] = bounds;
|
113 | ```
|
114 |
|
115 | #### resetBoundsOnResize (bool)
|
116 |
|
117 | When true this will reset the map bounds if the parent resizes.
|
118 |
|
119 | Default: false
|
120 |
|
121 | #### onChildClick (func)
|
122 |
|
123 | #### onChildMouseEnter (func)
|
124 |
|
125 | #### onChildMouseLeave (func)
|
126 |
|
127 | #### onZoomAnimationStart (func)
|
128 |
|
129 | #### onZoomAnimationEnd (func)
|
130 |
|
131 | #### onMapTypeIdChange (func)
|
132 | When the user changes the map type (HYBRID, ROADMAP, SATELLITE, TERRAIN) this fires
|
133 |
|
134 | #### distanceToMouse (func)
|
135 |
|
136 | #### googleMapLoader (func)
|
137 |
|
138 | #### onGoogleApiLoaded (func)
|
139 | Directly access the maps API - *use at your own risk!*
|
140 |
|
141 | ```javascript
|
142 | <GoogleMap onGoogleApiLoaded={({map, maps}) => console.log(map, maps)} />
|
143 | ```
|
144 |
|
145 | To prevent warning message add _yesIWantToUseGoogleMapApiInternals_ property to GoogleMap
|
146 |
|
147 | ```javascript
|
148 | <GoogleMap onGoogleApiLoaded={({map, maps}) => console.log(map, maps)}
|
149 | yesIWantToUseGoogleMapApiInternals
|
150 | />
|
151 | ```
|
152 |
|
153 | ## Child Component API
|
154 |
|
155 | ### parameters
|
156 |
|
157 | #### lat (number)
|
158 | Latitude to place the marker component
|
159 |
|
160 | #### lng (number)
|
161 | Longitude to place the marker component
|
162 |
|
163 | #### $hover (bool) [automatic]
|
164 | GoogleMap passes a $hover prop to hovered components. To detect hover it an uses internal mechanism, explained in x_distance_hover example
|
165 |
|
166 | Example:
|
167 | ```javascript
|
168 | render() {
|
169 | const style = this.props.$hover ? greatPlaceStyleHover : greatPlaceStyle;
|
170 |
|
171 | return (
|
172 | <div style={style}>
|
173 | {this.props.text}
|
174 | </div>
|
175 | );
|
176 | }
|
177 | ```
|
178 |
|
179 |
|
180 | ## Utility functions
|
181 |
|
182 | #### fitBounds (func)
|
183 | Use fitBounds to get zoom and center.
|
184 |
|
185 | Example:
|
186 |
|
187 | ```javascript
|
188 | import { fitBounds } from 'google-map-react/utils';
|
189 |
|
190 | const bounds = {
|
191 | nw: {
|
192 | lat: 50.01038826014866,
|
193 | lng: -118.6525866875
|
194 | },
|
195 | se: {
|
196 | lat: 32.698335045970396,
|
197 | lng: -92.0217273125
|
198 | }
|
199 | };
|
200 |
|
201 | // Or
|
202 |
|
203 | const bounds = {
|
204 | ne: {
|
205 | lat: 50.01038826014866,
|
206 | lng: -118.6525866875
|
207 | },
|
208 | sw: {
|
209 | lat: 32.698335045970396,
|
210 | lng: -92.0217273125
|
211 | }
|
212 | };
|
213 |
|
214 | const size = {
|
215 | width: 640, // Map width in pixels
|
216 | height: 380, // Map height in pixels
|
217 | };
|
218 |
|
219 | const {center, zoom} = fitBounds(bounds, size);
|
220 | ```
|
221 |
|
222 | #### tile2LatLng (func)
|
223 |
|
224 | #### latLng2Tile (func)
|
225 |
|
226 | #### getTilesIds (func)
|
227 |
|
228 | ## Tips
|
229 |
|
230 | ### My map doesn't appear
|
231 |
|
232 | Make sure the container element has width and height. The map will try to fill the parent container, but if the container has no size, the map will collapse to 0 width / height.
|
233 |
|
234 | ### Positioning a marker
|
235 |
|
236 | Initially any map object has its top left corner at lat lng coordinates. It's up to you to set the object origin to 0,0 coordinates.
|
237 |
|
238 | Example (centering the marker):
|
239 |
|
240 | ```javascript
|
241 | const greatPlaceStyle = {
|
242 | position: 'absolute',
|
243 | transform: 'translate(-50%, -50%)';
|
244 | }
|
245 | ```
|
246 |
|
247 | ```javascript
|
248 | render() {
|
249 | return (
|
250 | <div style={greatPlaceStyle}>
|
251 | {this.props.text}
|
252 | </div>
|
253 | );
|
254 | }
|
255 | ```
|
256 |
|
257 | ### Rendering in a modal
|
258 |
|
259 | If at the moment of GoogleMap control created, a modal has no size (width,height=0) or/and not displayed, the simple solution is to add something like this in render:
|
260 |
|
261 | ```javascript
|
262 | render() {
|
263 | return this.props.modalIsOpen
|
264 | ? <GoogleMap />
|
265 | : null;
|
266 | }
|
267 | ```
|
268 |
|
269 | ### Adding a SearchBox
|
270 |
|
271 | ```javascript
|
272 | import React from 'react';
|
273 | import ReactDOM from 'react-dom';
|
274 |
|
275 | export default class SearchBox extends React.Component {
|
276 | static propTypes = {
|
277 | placeholder: React.PropTypes.string,
|
278 | onPlacesChanged: React.PropTypes.func
|
279 | }
|
280 | render() {
|
281 | return <input ref="input" {...this.props} type="text"/>;
|
282 | }
|
283 | onPlacesChanged = () => {
|
284 | if (this.props.onPlacesChanged) {
|
285 | this.props.onPlacesChanged(this.searchBox.getPlaces());
|
286 | }
|
287 | }
|
288 | componentDidMount() {
|
289 | var input = ReactDOM.findDOMNode(this.refs.input);
|
290 | this.searchBox = new google.maps.places.SearchBox(input);
|
291 | this.searchBox.addListener('places_changed', this.onPlacesChanged);
|
292 | }
|
293 | componentWillUnmount() {
|
294 | // https://developers.google.com/maps/documentation/javascript/events#removing
|
295 | google.maps.event.clearInstanceListeners(this.searchBox);
|
296 | }
|
297 | }
|
298 | ```
|
299 |
|
300 | You will need to preload the google maps API, but `google-map-react` checks if the base api is already loaded,
|
301 | and if so, uses it, so it won't load a second copy of the library.
|
302 |
|
303 | ```html
|
304 | <script type="text/javascript" src="https://maps.google.com/maps/api/js?libraries=places"></script>
|
305 | ```
|
306 |
|
307 | ### Override the default minimum zoom
|
308 |
|
309 | *WARNING*: Setting this option can break markers calculation, causing no homeomorphism between screen coordinates and map.
|
310 |
|
311 | You can use the `minZoom` custom option to prevent our minimum-zoom calculation:
|
312 |
|
313 | ```javascript
|
314 | function createMapOptions() {
|
315 | return {
|
316 | minZoom: 2,
|
317 | };
|
318 | }
|
319 | ```
|
320 |
|
321 | ### Define touch device behavior of scrolling & panning for the map
|
322 |
|
323 | Google Maps provides control over the behavior of touch based interaction with the map.
|
324 | For example, on mobile devices swiping up on the map might mean two things: Scrolling the container or panning the map.
|
325 | To resolve this ambigiuity, you can use the custom map option `gestureHandling` to get the required behavior.
|
326 |
|
327 | ```javascript
|
328 | function createMapOptions() {
|
329 | return {
|
330 | gestureHandling: 'greedy' // Will capture all touch events on the map towards map panning
|
331 | }
|
332 | }
|
333 | ```
|
334 |
|
335 | The default setting is `gestureHandling:auto` which tries to detect based on the page/content sizes if a `greedy` setting is best (no scrolling is required) or `cooperative` (scrolling is possible)
|
336 |
|
337 | For more details see the [google documentation](https://developers.google.com/maps/documentation/javascript/interaction) for this setting.
|
338 |
|
339 | ### Heatmap Layer
|
340 |
|
341 | For enabling heatmap layer, just add `heatmapLibrary={true}` and provide data for heatmap in `heatmap` as props.
|
342 |
|
343 | #### Example
|
344 |
|
345 | ```javascript
|
346 | <GoogleMapReact
|
347 | bootstrapURLKeys={{ key: [YOUR_KEY] }}
|
348 | zoom={zoom}
|
349 | center={center}
|
350 | heatmapLibrary={true}
|
351 | heatmap={{data}}
|
352 | >
|
353 | {markers}
|
354 | </GoogleMapReact>
|
355 | ```
|
356 |
|
357 | #### Important Note
|
358 |
|
359 | If you have multiple `GoogleMapReact` components in project and you want to use heatmap layer so provide `heatmapLibrary={true}` for all `GoogleMapReact` components so component will load heatmap library at the beginning with google map api.
|
360 |
|
361 | ### Localizing the Map
|
362 |
|
363 | This is done by setting bootstrapURLKeys.[language](https://developers.google.com/maps/documentation/javascript/localization#Language) and bootstrapURLKeys.[region](https://developers.google.com/maps/documentation/javascript/localization#Region). Also notice that setting region to 'cn' is required when using the map from within China, see [google documentation](https://developers.google.com/maps/documentation/javascript/localization#GoogleMapsChina) for more info. Setting 'cn' will result in use of the specific API URL for China.
|