1 | ## GoogleMap API
|
2 |
|
3 | ### parameters
|
4 |
|
5 | #### apiKey (string) (_Deprecated use bootstrapURLKeys_)
|
6 |
|
7 | Google maps api 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 | #### onTilesLoaded (func)
|
142 | This function is called when the visible tiles have finished loading.
|
143 |
|
144 | ```javascript
|
145 | <GoogleMap onGoogleApiLoaded={({map, maps}) => console.log(map, maps)} />
|
146 | ```
|
147 |
|
148 | To prevent warning message add _yesIWantToUseGoogleMapApiInternals_ property to GoogleMap
|
149 |
|
150 | ```javascript
|
151 | <GoogleMap onGoogleApiLoaded={({map, maps}) => console.log(map, maps)}
|
152 | yesIWantToUseGoogleMapApiInternals
|
153 | />
|
154 | ```
|
155 |
|
156 | ## Child Component API
|
157 |
|
158 | ### parameters
|
159 |
|
160 | #### lat (number)
|
161 | Latitude to place the marker component
|
162 |
|
163 | #### lng (number)
|
164 | Longitude to place the marker component
|
165 |
|
166 | #### $hover (bool) [automatic]
|
167 | GoogleMap passes a $hover prop to hovered components. To detect hover it an uses internal mechanism, explained in x_distance_hover example
|
168 |
|
169 | Example:
|
170 | ```javascript
|
171 | render() {
|
172 | const style = this.props.$hover ? greatPlaceStyleHover : greatPlaceStyle;
|
173 |
|
174 | return (
|
175 | <div style={style}>
|
176 | {this.props.text}
|
177 | </div>
|
178 | );
|
179 | }
|
180 | ```
|
181 |
|
182 |
|
183 | ## Utility functions
|
184 |
|
185 | #### fitBounds (func)
|
186 | Use fitBounds to get zoom and center.
|
187 |
|
188 | Example:
|
189 |
|
190 | ```javascript
|
191 | import { fitBounds } from 'google-map-react/utils';
|
192 |
|
193 | const bounds = {
|
194 | nw: {
|
195 | lat: 50.01038826014866,
|
196 | lng: -118.6525866875
|
197 | },
|
198 | se: {
|
199 | lat: 32.698335045970396,
|
200 | lng: -92.0217273125
|
201 | }
|
202 | };
|
203 |
|
204 | // Or
|
205 |
|
206 | const bounds = {
|
207 | ne: {
|
208 | lat: 50.01038826014866,
|
209 | lng: -118.6525866875
|
210 | },
|
211 | sw: {
|
212 | lat: 32.698335045970396,
|
213 | lng: -92.0217273125
|
214 | }
|
215 | };
|
216 |
|
217 | const size = {
|
218 | width: 640, // Map width in pixels
|
219 | height: 380, // Map height in pixels
|
220 | };
|
221 |
|
222 | const {center, zoom} = fitBounds(bounds, size);
|
223 | ```
|
224 |
|
225 | #### tile2LatLng (func)
|
226 |
|
227 | #### latLng2Tile (func)
|
228 |
|
229 | #### getTilesIds (func)
|
230 |
|
231 | ## Tips
|
232 |
|
233 | ### My map doesn't appear
|
234 |
|
235 | 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.
|
236 |
|
237 | ### Positioning a marker
|
238 |
|
239 | 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.
|
240 |
|
241 | Example (centering the marker):
|
242 |
|
243 | ```javascript
|
244 | const greatPlaceStyle = {
|
245 | position: 'absolute',
|
246 | transform: 'translate(-50%, -50%)';
|
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={{data}}
|
355 | >
|
356 | {markers}
|
357 | </GoogleMapReact>
|
358 | ```
|
359 |
|
360 | #### Important Note
|
361 |
|
362 | 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.
|
363 |
|
364 | ### Localizing the Map
|
365 |
|
366 | 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.
|