diff --git a/README.md b/README.md index ed9100d..346e98f 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,105 @@ -#google map react -isomorphic google map react component, allows render react components on the google map +`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. + +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*) + +##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. +[simple example in action](http://istarkov.github.io/google-map-react/map/simple) +```javascript +import React, {PropTypes, Component} from 'react/addons'; +import shouldPureComponentUpdate from 'react-pure-render/function'; + +import GoogleMap from 'google-map-react'; +import MyGreatPlace from './my_great_place.jsx'; + +export default class SimpleMapPage extends Component { + static defaultProps = { + center: [59.938043, 30.337157], + zoom: 9, + greatPlaceCoords: {lat: 59.724465, lng: 30.080121} + }; + + shouldComponentUpdate = shouldPureComponentUpdate; + + constructor(props) { + super(props); + } + + render() { + return ( + + + + + ); + } +} +``` + +##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. + +###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*) + +###Components positions calculated independent of `google maps api`. +It render components on the map before (and even without) `google maps api` loaded. + +###It loads google map api on demand. +There is no need to place `