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 |
|
86 | #### onClick (func)
|
87 |
|
88 | ```
|
89 | ({ x, y, lat, lng, event })
|
90 | ```
|
91 |
|
92 | The `event` prop in args is the outer div onClick event, not the gmap-api 'click' event.
|
93 |
|
94 | Example:
|
95 |
|
96 | ```javascript
|
97 | _onClick = ({x, y, lat, lng, event}) => console.log(x, y, lat, lng, event)
|
98 | // ES5 users
|
99 | function _onClick(obj){ console.log(obj.x, obj.y, obj.lat, obj.lng, obj.event);}
|
100 |
|
101 | <GoogleMap onClick={_onClick} ... />
|
102 | ```
|
103 |
|
104 | #### onBoundsChange (func) (_Deprecated use onChange_)
|
105 |
|
106 | ```
|
107 | ({ center, zoom, bounds, marginBounds })
|
108 | ```
|
109 | ```
|
110 | [lat, lng] = center;
|
111 | [topLat, leftLng, bottomLat, rightLng] = bounds;
|
112 | ```
|
113 |
|
114 | #### resetBoundsOnResize (bool)
|
115 |
|
116 | When true this will reset the map bounds if the parent resizes.
|
117 |
|
118 | Default: false
|
119 |
|
120 | #### onChildClick (func)
|
121 |
|
122 | #### onChildMouseEnter (func)
|
123 |
|
124 | #### onChildMouseLeave (func)
|
125 |
|
126 | #### onZoomAnimationStart (func)
|
127 |
|
128 | #### onZoomAnimationEnd (func)
|
129 |
|
130 | #### onMapTypeIdChange (func)
|
131 | When the user changes the map type (HYBRID, ROADMAP, SATELLITE, TERRAIN) this fires
|
132 |
|
133 | #### distanceToMouse (func)
|
134 |
|
135 | #### googleMapLoader (func)
|
136 |
|
137 | #### onGoogleApiLoaded (func)
|
138 | Directly access the maps API - *use at your own risk!*
|
139 |
|
140 | ```javascript
|
141 | <GoogleMap onGoogleApiLoaded={({map, maps}) => console.log(map, maps)} />
|
142 | ```
|
143 |
|
144 | To prevent warning message add _yesIWantToUseGoogleMapApiInternals_ property to GoogleMap
|
145 |
|
146 | ```javascript
|
147 | <GoogleMap onGoogleApiLoaded={({map, maps}) => console.log(map, maps)}
|
148 | yesIWantToUseGoogleMapApiInternals
|
149 | />
|
150 | ```
|
151 |
|
152 | ## Child Component API
|
153 |
|
154 | ### parameters
|
155 |
|
156 | #### lat (number)
|
157 | Latitude to place the marker component
|
158 |
|
159 | #### lng (number)
|
160 | Longitude to place the marker component
|
161 |
|
162 | #### $hover (bool) [automatic]
|
163 | GoogleMap passes a $hover prop to hovered components. To detect hover it an uses internal mechanism, explained in x_distance_hover example
|
164 |
|
165 | Example:
|
166 | ```javascript
|
167 | render() {
|
168 | const style = this.props.$hover ? greatPlaceStyleHover : greatPlaceStyle;
|
169 |
|
170 | return (
|
171 | <div style={style}>
|
172 | {this.props.text}
|
173 | </div>
|
174 | );
|
175 | }
|
176 | ```
|
177 |
|
178 |
|
179 | ## Utility functions
|
180 |
|
181 | #### fitBounds (func)
|
182 | Use fitBounds to get zoom and center.
|
183 |
|
184 | Example:
|
185 |
|
186 | ```javascript
|
187 | import { fitBounds } from 'google-map-react/utils';
|
188 |
|
189 | const bounds = {
|
190 | nw: {
|
191 | lat: 50.01038826014866,
|
192 | lng: -118.6525866875
|
193 | },
|
194 | se: {
|
195 | lat: 32.698335045970396,
|
196 | lng: -92.0217273125
|
197 | }
|
198 | };
|
199 |
|
200 | // Or
|
201 |
|
202 | const bounds = {
|
203 | ne: {
|
204 | lat: 50.01038826014866,
|
205 | lng: -118.6525866875
|
206 | },
|
207 | sw: {
|
208 | lat: 32.698335045970396,
|
209 | lng: -92.0217273125
|
210 | }
|
211 | };
|
212 |
|
213 | const size = {
|
214 | width: 640, // Map width in pixels
|
215 | height: 380, // Map height in pixels
|
216 | };
|
217 |
|
218 | const {center, zoom} = fitBounds(bounds, size);
|
219 | ```
|
220 |
|
221 | #### tile2LatLng (func)
|
222 |
|
223 | #### latLng2Tile (func)
|
224 |
|
225 | #### getTilesIds (func)
|
226 |
|
227 | ## Tips
|
228 |
|
229 | ### My map doesn't appear
|
230 |
|
231 | 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.
|
232 |
|
233 | ### Positioning a marker
|
234 |
|
235 | 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.
|
236 |
|
237 | Example (centering the marker):
|
238 |
|
239 | ```javascript
|
240 | const MARKER_SIZE = 40;
|
241 | const greatPlaceStyle = {
|
242 | position: 'absolute',
|
243 | width: MARKER_SIZE,
|
244 | height: MARKER_SIZE,
|
245 | left: -MARKER_SIZE / 2,
|
246 | top: -MARKER_SIZE / 2
|
247 | }
|
248 | ```
|
249 |
|
250 | ```javascript
|
251 | render() {
|
252 | return (
|
253 | <div style={greatPlaceStyle}>
|
254 | {this.props.text}
|
255 | </div>
|
256 | );
|
257 | }
|
258 | ```
|
259 |
|
260 | ### Rendering in a modal
|
261 |
|
262 | 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:
|
263 |
|
264 | ```javascript
|
265 | render() {
|
266 | return this.props.modalIsOpen
|
267 | ? <GoogleMap />
|
268 | : null;
|
269 | }
|
270 | ```
|
271 |
|
272 | ### Adding a SearchBox
|
273 |
|
274 | ```javascript
|
275 | import React from 'react';
|
276 | import ReactDOM from 'react-dom';
|
277 |
|
278 | export default class SearchBox extends React.Component {
|
279 | static propTypes = {
|
280 | placeholder: React.PropTypes.string,
|
281 | onPlacesChanged: React.PropTypes.func
|
282 | }
|
283 | render() {
|
284 | return <input ref="input" {...this.props} type="text"/>;
|
285 | }
|
286 | onPlacesChanged = () => {
|
287 | if (this.props.onPlacesChanged) {
|
288 | this.props.onPlacesChanged(this.searchBox.getPlaces());
|
289 | }
|
290 | }
|
291 | componentDidMount() {
|
292 | var input = ReactDOM.findDOMNode(this.refs.input);
|
293 | this.searchBox = new google.maps.places.SearchBox(input);
|
294 | this.searchBox.addListener('places_changed', this.onPlacesChanged);
|
295 | }
|
296 | componentWillUnmount() {
|
297 | // https://developers.google.com/maps/documentation/javascript/events#removing
|
298 | google.maps.event.clearInstanceListeners(this.searchBox);
|
299 | }
|
300 | }
|
301 | ```
|
302 |
|
303 | You will need to preload the google maps API, but `google-map-react` checks if the base api is already loaded,
|
304 | and if so, uses it, so it won't load a second copy of the library.
|
305 |
|
306 | ```html
|
307 | <script type="text/javascript" src="https://maps.google.com/maps/api/js?libraries=places"></script>
|
308 | ```
|
309 |
|
310 | ### Override the default minimum zoom
|
311 |
|
312 | *WARNING*: Setting this option can break markers calculation, causing no homeomorphism between screen coordinates and map.
|
313 |
|
314 | You can use the `minZoom` custom option to prevent our minimum-zoom calculation:
|
315 |
|
316 | ```javascript
|
317 | function createMapOptions() {
|
318 | return {
|
319 | minZoom: 2,
|
320 | };
|
321 | }
|
322 | ```
|
323 |
|
324 | ### Define touch device behavior of scrolling & panning for the map
|
325 |
|
326 | Google Maps provides control over the behavior of touch based interaction with the map.
|
327 | For example, on mobile devices swiping up on the map might mean two things: Scrolling the container or panning the map.
|
328 | To resolve this ambigiuity, you can use the custom map option `gestureHandling` to get the required behavior.
|
329 |
|
330 | ```javascript
|
331 | function createMapOptions() {
|
332 | return {
|
333 | gestureHandling: 'greedy' // Will capture all touch events on the map towards map panning
|
334 | }
|
335 | }
|
336 | ```
|
337 |
|
338 | 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)
|
339 |
|
340 | For more details see the [google documentation](https://developers.google.com/maps/documentation/javascript/interaction) for this setting.
|
341 |
|
342 | ### Heatmap Layer
|
343 |
|
344 | For enabling heatmap layer, just add `heatmapLibrary={true}` and provide data for heatmap in `heatmap` as props.
|
345 |
|
346 | #### Example
|
347 |
|
348 | ```javascript
|
349 | <GoogleMapReact
|
350 | bootstrapURLKeys={{ key: [YOUR_KEY] }}
|
351 | zoom={zoom}
|
352 | center={center}
|
353 | heatmapLibrary={true}
|
354 | heatmap={{
|
355 | positions: [
|
356 | {
|
357 | lat: 60.714305,
|
358 | lng: 47.051773,
|
359 | },
|
360 | ...
|
361 | ],
|
362 | options: {
|
363 | radius: 20,
|
364 | opacity: 0.7,
|
365 | gradient: [
|
366 | 'rgba(0, 255, 255, 0)',
|
367 | 'rgba(0, 255, 255, 1)',
|
368 | ...
|
369 | ]
|
370 | },
|
371 | }}
|
372 | >
|
373 | {markers}
|
374 | </GoogleMapReact>
|
375 | ```
|
376 |
|
377 | #### Important Note
|
378 |
|
379 | 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.
|
380 |
|
381 | ### Localizing the Map
|
382 |
|
383 | 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.
|