react-google-maps
React.js Google Maps integration component
Quick start: SimpleMap
Declare your Google Maps components using React components.
; { return <section style=height: "100%"> <GoogleMap containerProps= style: height: "100%" defaultZoom=3 defaultCenter=lat: -25363882 lng: 131044922 onClick=propsonMapClick > propsmarkers </GoogleMap> </section> ;}
Documentation
Rule 1
Define <GoogleMap>
component in the top level. Use containerProps
, containerTagName
to customized the wrapper DOM for the component.
Other components like <Marker>
belongs to the children of <GoogleMap>
. You already know this from the example code above.
Rule 2
Everything in the Methods
table in the official documentation of the component could be set via component's props directly. For example, a <Marker>
component has the following props:
animation, attribution, clickable, cursor, draggable, icon, label, opacity, options, place, position, shape, title, visible, zIndex
Rule 3
Every props mentioned in Rule 2 could be either controlled or uncontrolled property. Free to use either one depends on your use case.
Rule 4
Anything that are inside components' options
property could ONLY be accessible via props.options
. It's your responsibility to manage props.options
object during the React lifetime for your component. My suggestion is, always use Rule 3 if possible. Only use options
when it's necessary.
Map Event Triggers
One common event trigger is to resize map after the size of the container div changes:
{ var map = ReactDOM; windowgooglemapsevent;} <GoogleMap ...props ref="map" > ... </GoogleMap>
Check the examples
Static hosted demo site on GitHub. The code is located under examples/gh-pages folder.
Usage
react-google-maps
requires React 0.14
npm install --save react-google-maps
All components are available on the top-level export.
;
Optimize bundle size
You could of course import from individual modules to save your webpack's bundle size.
; // Or import {default as GoogleMap} ...
Additional Addons
Some addons component could ONLY be accessible via direct import:
;
Development
First, clone the project.
git clone ...
With Docker
Install docker@^1.8.2
, docker-compose@^1.4.0
and optionally docker-machine@^0.4.1
. Then,
docker-compose run --service-ports web
Then open http://192.168.59.103:8080.
192.168.59.103 is actually your ip from docker-machine ip
.
If you change code in your local, you'll need to rebuild the image to make changes happen.
If you're previously using boot2docker
, you may want to migrate to docker-machine instead.
docker-compose build
With Mac
Install node
. Then,
npm installcd examples/gh-pagesnpm installnpm start
Then open http://localhost:8080/webpack-dev-server/.
With Windows
Install node
. Then,
npm installcd examples/gh-pagesnpm installnpm start:windows
Then open http://localhost:8080/webpack-dev-server/.
Contributing
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request