archive-gh-me/google-map-react
1
0
Fork 0
mirror of https://github.com/google-map-react/google-map-react.git synced 2025-12-08 18:26:32 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1 from AprilArcus/master

Browse Source 
proofing readme
This commit is contained in:
Ivan Starkov 2015-06-10 22:50:00 +03:00
commit ec3e5d6752
1 changed files with 28 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
README.md
View File

@ -1,16 +1,14 @@
`google-map-react` is a component written over a small set of `google maps api`. It allows you to render any `react components` on the google map. It is fully isomorphic and can render on a server. Also it render map components in browser even if google map api is not loaded. (*you can disable javascript in browser dev tools, and reload any example page to view how it works*)
It uses internal tweakable hover algorithm - every object on map can be hovered.
`google-map-react` is a component written over a small set of the [Google Maps API](https://developers.google.com/maps/). It allows you to render any React component on the Google Map. It is fully isomorphic and can render on a server. Additionally, it can render map components in the browser even if the Google Maps API is not loaded. It uses an internal, tweakable hover algorithm - every object on the map can be hovered.
It allows you to create interfaces like this [example](http://istarkov.github.io/google-map-react/map/main)
(*You can scroll table, zoom - move map, hover-click on markers, click on table row*)
It allows you to create interfaces like this [example](http://istarkov.github.io/google-map-react/map/main) *(You can scroll the table, zoom/move the map, hover/click on markers, and click on table rows)*
##Installation
```
npm install --save google-map-react
```
##What's It Look Like?
At simple case you just need to add `lat` `lng` props to any child of `GoogleMap` component.
##What's it Look Like?
In the simple case you just need to add `lat` `lng` props to any child of `GoogleMap` component.
[simple example in action](http://istarkov.github.io/google-map-react/map/simple)
```javascript
import React, {PropTypes, Component} from 'react/addons';
@ -47,51 +45,41 @@ export default class SimpleMapPage extends Component {
##Features
###It works with your components.
Instead of ugly google map markers, balloons and other map components, just render on the map your cool animated react components.
###Works with your Components
Instead of the ugly Google Maps markers, balloons and other map components, you can render your cool animated react components on the map.
###It isomorphic.
It renders on server. (*Welcome search engines*) (*you can disable javascript in browser dev tools, and reload any example page to view how it works*)
###Isomorphic Rendering
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)*
###Components positions calculated independent of `google maps api`.
It render components on the map before (and even without) `google maps api` loaded.
###Component Positions Calculated Independently of Google Maps API
It renders components on the map before (and even without) the Google Maps API loaded.
###It loads google map api on demand.
There is no need to place `<script src=` tag at top of page. Google map api loads after first usage of `GoogleMap` component.
###Google Maps API Loads on Demand
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.
###It uses internal hover algorithm.
Now every object on map can be hovered. (*but you can still use css hover selectors if you want*).
Just zoom out here [example](http://istarkov.github.io/google-map-react/map/main) and you still will be able to hover on almost every map marker.
Also 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)
###Internal Hover Algorithm
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.
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)
##Known Issues
* Small icons jingle on Firefox (I don't see this in my older 'GoogleMap' version, so I will find the problem soon)
##Issues
* Small icons jingle on Firefox (i don't see this in my older 'GoogleMap' version, so will find problem soon)
##Examples (API is really simple, just look at the examples)
* Placing react components on the map
[simple](http://istarkov.github.io/google-map-react/map/simple/) ([source](https://github.com/istarkov/google-map-react-examples/blob/master/web/flux/components/examples/x_simple/simple_map_page.jsx))
##Examples (api is really simple, just look into examples code)
* Simple example how to place react components on the map
[simple](http://istarkov.github.io/google-map-react/map/simple/)
[simple source](https://github.com/istarkov/google-map-react-examples/blob/master/web/flux/components/examples/x_simple/simple_map_page.jsx)
* Hover api examples
[simple hover](http://istarkov.github.io/google-map-react/map/simple_hover/)
[simple hover source](https://github.com/istarkov/google-map-react-examples/blob/master/web/flux/components/examples/x_simple_hover/simple_hover_map_page.jsx)
[distance hover](http://istarkov.github.io/google-map-react/map/distance_hover/)
[distance hover source](https://github.com/istarkov/google-map-react-examples/blob/master/web/flux/components/examples/x_distance_hover/distance_hover_map_page.jsx)
* Hover effects
[simple hover](http://istarkov.github.io/google-map-react/map/simple_hover/) ([source](https://github.com/istarkov/google-map-react-examples/blob/master/web/flux/components/examples/x_simple_hover/simple_hover_map_page.jsx))
[distance hover](http://istarkov.github.io/google-map-react/map/distance_hover/) ([source](https://github.com/istarkov/google-map-react-examples/blob/master/web/flux/components/examples/x_distance_hover/distance_hover_map_page.jsx))
* GoogleMap events
[events](http://istarkov.github.io/google-map-react/map/events/)
[events source](https://github.com/istarkov/google-map-react-examples/blob/master/web/flux/components/examples/x_events/events_map_page.jsx)
[events](http://istarkov.github.io/google-map-react/map/events/) ([source](https://github.com/istarkov/google-map-react-examples/blob/master/web/flux/components/examples/x_events/events_map_page.jsx))
* All api examples
[main](http://istarkov.github.io/google-map-react/map/main/)
[main source](https://github.com/istarkov/google-map-react-examples/blob/master/web/flux/components/examples/x_main/main_map_block.jsx)
[balderdash](http://istarkov.github.io/google-map-react/map/balderdash/)
source same as main.
[main](http://istarkov.github.io/google-map-react/map/main/) ([source](https://github.com/istarkov/google-map-react-examples/blob/master/web/flux/components/examples/x_main/main_map_block.jsx))
[balderdash](http://istarkov.github.io/google-map-react/map/balderdash/) (same source as main)
* Example project
[google-map-react-examples](https://github.com/istarkov/google-map-react-examples)
@ -100,6 +88,3 @@ Also this algorithm allows you to tweak hover probability of map objects, for ex
(*thank you [Dan Abramov](http://gaearon.github.io/react-dnd/) for titles structure*)
(*great thanks to [Vladimir Akimov](https://github.com/b2whats) he knows why*)
#PS:
###Please help me to convert this `runglish readme` to `english readme`.