Skip to content

Commit adb04c2

Browse files
committed
Update README.md
1 parent 64740be commit adb04c2

File tree

1 file changed

+30
-0
lines changed

1 file changed

+30
-0
lines changed

README.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,38 +9,47 @@ It allows you to create interfaces like this [example](http://istarkov.github.io
99
##Features
1010

1111
###Works with your Components
12+
1213
Instead of the ugly Google Maps markers, balloons and other map components, you can render your cool animated react components on the map.
1314

1415
###Isomorphic Rendering
16+
1517
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)*
1618

1719
###Component Positions Calculated Independently of Google Maps API
20+
1821
It renders components on the map before (and even without) the Google Maps API loaded.
1922

2023
###Google Maps API Loads on Demand
24+
2125
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.
2226

2327
###Internal Hover Algorithm
28+
2429
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.
2530

2631
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)
2732

2833
##Known Issues
34+
2935
* Small icons jiggle on Firefox (I don't see this in my older 'GoogleMap' version, so I will find the problem soon)
3036

3137

3238
##Installation
3339

3440
### npm
41+
3542
```
3643
npm install --save google-map-react
3744
```
3845

3946
### bower
47+
4048
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)
4149
UMD AMD and other build are available under dist folder after `npm install`
4250

4351
##What's it Look Like?
52+
4453
In the simple case you just need to add `lat` `lng` props to any child of `GoogleMap` component.
4554
[simple example in action](http://istarkov.github.io/google-map-react/map/simple)
4655

@@ -171,6 +180,7 @@ createMapOptions: function (maps) {
171180
See "Custom map options example" in Examples below for a further example.
172181

173182
####onClick (func)
183+
174184
`(x, y, lat, lng, event)`
175185

176186
The `event` prop in args is the outer div onClick event, not the gmap-api 'click' event.
@@ -186,19 +196,27 @@ Example:
186196
```
187197

188198
####onBoundsChange (func)
199+
189200
```
190201
(center, zoom, bounds, marginBounds)
191202
```
192203
```
193204
[lat, lng] = center;
194205
[topLat, leftLng, bottomLat, rightLng] = bounds;
195206
```
207+
196208
####onChildClick (func)
209+
197210
####onChildMouseEnter (func)
211+
198212
####onChildMouseLeave (func)
213+
199214
####onZoomAnimationStart (func)
215+
200216
####onZoomAnimationEnd (func)
217+
201218
####distanceToMouse (func)
219+
202220
####googleMapLoader (func)
203221

204222
####onGoogleApiLoaded (func)
@@ -271,15 +289,21 @@ const size = {
271289

272290
const {center, zoom} = fitBounds({nw, se}, size);
273291
```
292+
274293
####tile2LatLng (func)
294+
275295
####latLng2Tile (func)
296+
276297
####getTilesIds (func)
277298

278299
## Tips
300+
279301
### Positioning a marker
302+
280303
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.
281304

282305
Example (centering the marker):
306+
283307
```jsx
284308
const MARKER_SIZE = 40;
285309
const greatPlaceStyle = {
@@ -290,6 +314,7 @@ const greatPlaceStyle = {
290314
top: -MARKER_SIZE / 2
291315
}
292316
```
317+
293318
```jsx
294319
render() {
295320
return (
@@ -301,6 +326,7 @@ render() {
301326
```
302327

303328
### Rendering in a modal
329+
304330
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:
305331

306332
```jsx
@@ -339,16 +365,20 @@ export default class SearchBox extends React.Component {
339365
}
340366
}
341367
```
368+
342369
You will need to preload the google maps API, but `google-map-react` checks if the base api is already loaded,
343370
and if so, uses it, so it won't load a second copy of the library.
344371

345372
```html
346373
<script type="text/javascript" src="https://maps.google.com/maps/api/js?libraries=places&sensor=false"></script>
347374
```
375+
348376
---
377+
349378
(*Really big thanks to [April Arcus](https://github.com/AprilArcus) for documentation fixes*)
350379
(*thank you [Dan Abramov](http://gaearon.github.io/react-dnd/) for titles structure*)
351380
(*great thanks to [Vladimir Akimov](https://github.com/b2whats) he knows why*)
352381

353382
## License
383+
354384
MIT (http://www.opensource.org/licenses/mit-license.php)

0 commit comments

Comments
 (0)