You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+30Lines changed: 30 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -9,38 +9,47 @@ It allows you to create interfaces like this [example](http://istarkov.github.io
9
9
##Features
10
10
11
11
###Works with your Components
12
+
12
13
Instead of the ugly Google Maps markers, balloons and other map components, you can render your cool animated react components on the map.
13
14
14
15
###Isomorphic Rendering
16
+
15
17
It renders on the server. *(Welcome search engines)**(you can disable javascript in browser dev tools, and reload any example page to see how it works)*
16
18
17
19
###Component Positions Calculated Independently of Google Maps API
20
+
18
21
It renders components on the map before (and even without) the Google Maps API loaded.
19
22
20
23
###Google Maps API Loads on Demand
24
+
21
25
There is no need to place a `<script src=` tag at top of page. The Google Maps API loads upon the first usage of the `GoogleMap` component.
22
26
23
27
###Internal Hover Algorithm
28
+
24
29
Now every object on the map can be hovered (however, you can still use css hover selectors if you want). If you try zooming out here [example](http://istarkov.github.io/google-map-react/map/main), you will still be able to hover on almost every map marker.
25
30
26
31
This algorithm allows you to tweak hover probability of map objects, for example making some objects "more hoverable". [distance_hover example with different hover probabilities](http://istarkov.github.io/google-map-react/map/distance_hover)
27
32
28
33
##Known Issues
34
+
29
35
* Small icons jiggle on Firefox (I don't see this in my older 'GoogleMap' version, so I will find the problem soon)
30
36
31
37
32
38
##Installation
33
39
34
40
### npm
41
+
35
42
```
36
43
npm install --save google-map-react
37
44
```
38
45
39
46
### bower
47
+
40
48
We no longer intend to support Bower. Please stop using Bower. NPM works very well for front-end development, and you should use it instead. ((c)Dan Abramov)
41
49
UMD AMD and other build are available under dist folder after `npm install`
42
50
43
51
##What's it Look Like?
52
+
44
53
In the simple case you just need to add `lat``lng` props to any child of `GoogleMap` component.
45
54
[simple example in action](http://istarkov.github.io/google-map-react/map/simple)
46
55
@@ -171,6 +180,7 @@ createMapOptions: function (maps) {
171
180
See "Custom map options example" in Examples below for a further example.
172
181
173
182
####onClick (func)
183
+
174
184
`(x, y, lat, lng, event)`
175
185
176
186
The `event` prop in args is the outer div onClick event, not the gmap-api 'click' event.
@@ -186,19 +196,27 @@ Example:
186
196
```
187
197
188
198
####onBoundsChange (func)
199
+
189
200
```
190
201
(center, zoom, bounds, marginBounds)
191
202
```
192
203
```
193
204
[lat, lng] = center;
194
205
[topLat, leftLng, bottomLat, rightLng] = bounds;
195
206
```
207
+
196
208
####onChildClick (func)
209
+
197
210
####onChildMouseEnter (func)
211
+
198
212
####onChildMouseLeave (func)
213
+
199
214
####onZoomAnimationStart (func)
215
+
200
216
####onZoomAnimationEnd (func)
217
+
201
218
####distanceToMouse (func)
219
+
202
220
####googleMapLoader (func)
203
221
204
222
####onGoogleApiLoaded (func)
@@ -271,15 +289,21 @@ const size = {
271
289
272
290
const {center, zoom} =fitBounds({nw, se}, size);
273
291
```
292
+
274
293
####tile2LatLng (func)
294
+
275
295
####latLng2Tile (func)
296
+
276
297
####getTilesIds (func)
277
298
278
299
## Tips
300
+
279
301
### Positioning a marker
302
+
280
303
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.
281
304
282
305
Example (centering the marker):
306
+
283
307
```jsx
284
308
constMARKER_SIZE=40;
285
309
constgreatPlaceStyle= {
@@ -290,6 +314,7 @@ const greatPlaceStyle = {
290
314
top:-MARKER_SIZE/2
291
315
}
292
316
```
317
+
293
318
```jsx
294
319
render() {
295
320
return (
@@ -301,6 +326,7 @@ render() {
301
326
```
302
327
303
328
### Rendering in a modal
329
+
304
330
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:
0 commit comments