1 | # Google Map React · [![npm version](https://badge.fury.io/js/google-map-react.svg)](http://badge.fury.io/js/google-map-react) [![Build Status](https://travis-ci.org/google-map-react/google-map-react.svg?branch=master)](https://travis-ci.org/google-map-react/google-map-react) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](github.com/google-map-react/google-map-react/CONTRIBUTING.md)
|
2 |
|
3 | `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.
|
4 |
|
5 | It allows you to create interfaces like this [example](http://google-map-react.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)*
|
6 |
|
7 | ## Getting started
|
8 |
|
9 | In the simple case you just need to add `lat` and `lng` props to any child of `GoogleMapReact` component.
|
10 |
|
11 | [See it in action at jsbin](https://jsbin.com/ruwogapuke/1/edit?js,output)
|
12 |
|
13 | ```javascript
|
14 | import React, { Component } from 'react';
|
15 | import GoogleMapReact from 'google-map-react';
|
16 |
|
17 | const AnyReactComponent = ({ text }) => <div>{text}</div>;
|
18 |
|
19 | class SimpleMap extends Component {
|
20 | static defaultProps = {
|
21 | center: {
|
22 | lat: 59.95,
|
23 | lng: 30.33
|
24 | },
|
25 | zoom: 11
|
26 | };
|
27 |
|
28 | render() {
|
29 | return (
|
30 | // Important! Always set the container height explicitly
|
31 | <div style={{ height: '100vh', width: '100%' }}>
|
32 | <GoogleMapReact
|
33 | bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }}
|
34 | defaultCenter={this.props.center}
|
35 | defaultZoom={this.props.zoom}
|
36 | >
|
37 | <AnyReactComponent
|
38 | lat={59.955413}
|
39 | lng={30.337844}
|
40 | text={'Kreyser Avrora'}
|
41 | />
|
42 | </GoogleMapReact>
|
43 | </div>
|
44 | );
|
45 | }
|
46 | }
|
47 |
|
48 | export default SimpleMap;
|
49 | ```
|
50 |
|
51 | ### My map doesn't appear!
|
52 |
|
53 | - Make sure the container element has width and height. The map will try to fill the parent container, but if the container has no size, the map will collapse to 0 width / height. This is not a requirement for google-map-react, [its a requirement for google-maps in general](https://developers.google.com/maps/documentation/javascript/tutorial).
|
54 |
|
55 |
|
56 | ## Installation
|
57 |
|
58 | npm:
|
59 | ```
|
60 | npm install --save google-map-react
|
61 | ```
|
62 |
|
63 | yarn:
|
64 | ```
|
65 | yarn add google-map-react
|
66 | ```
|
67 |
|
68 | ## Features
|
69 |
|
70 | ### Works with your Components
|
71 |
|
72 | Instead of the ugly Google Maps markers, balloons and other map components, you can render your cool animated react components on the map.
|
73 |
|
74 | ### Isomorphic Rendering
|
75 |
|
76 | 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)*
|
77 |
|
78 | ### Component Positions Calculated Independently of Google Maps API
|
79 |
|
80 | It renders components on the map before (and even without) the Google Maps API loaded.
|
81 |
|
82 | ### Google Maps API Loads on Demand
|
83 |
|
84 | 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 `GoogleMapReact` component.
|
85 |
|
86 | ### Internal Hover Algorithm
|
87 |
|
88 | 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://google-map-react.github.io/google-map-react/map/main), you will still be able to hover on almost every map marker.
|
89 |
|
90 | ## Examples
|
91 |
|
92 | * Placing react components on the map:
|
93 | [simple](http://google-map-react.github.io/google-map-react/map/simple/) ([source](https://github.com/google-map-react/google-map-react-examples/blob/master/web/flux/components/examples/x_simple/simple_map_page.jsx))
|
94 |
|
95 | * Custom map options:
|
96 | [example](http://google-map-react.github.io/google-map-react/map/options/) ([source](https://github.com/google-map-react/google-map-react-examples/blob/master/web/flux/components/examples/x_options/options_map_page.jsx))
|
97 |
|
98 | * Hover effects:
|
99 | [simple hover](http://google-map-react.github.io/google-map-react/map/simple_hover/) ([source](https://github.com/google-map-react/google-map-react-examples/blob/master/web/flux/components/examples/x_simple_hover/simple_hover_map_page.jsx));
|
100 | [distance hover](http://google-map-react.github.io/google-map-react/map/distance_hover/) ([source](https://github.com/google-map-react/google-map-react-examples/blob/master/web/flux/components/examples/x_distance_hover/distance_hover_map_page.jsx))
|
101 |
|
102 | * GoogleMap events:
|
103 | [example](http://google-map-react.github.io/google-map-react/map/events/) ([source](https://github.com/google-map-react/google-map-react-examples/blob/master/web/flux/components/examples/x_events/events_map_page.jsx))
|
104 |
|
105 | * Example project:
|
106 | [main](http://google-map-react.github.io/google-map-react/map/main/) ([source](https://github.com/google-map-react/google-map-react-examples/blob/master/web/flux/components/examples/x_main/main_map_block.jsx)); [balderdash](http://google-map-react.github.io/google-map-react/map/balderdash/) (same source as main)
|
107 |
|
108 | * Clustering example (**new**: [source](https://github.com/istarkov/google-map-clustering-example))
|
109 | [google-map-clustering-example](http://istarkov.github.io/google-map-clustering-example/)
|
110 |
|
111 | * How to render thousands of markers (**new**: [source](https://github.com/istarkov/google-map-thousands-markers))
|
112 | [google-map-thousands-markers](https://istarkov.github.io/google-map-thousands-markers/)
|
113 |
|
114 | * All api examples:
|
115 | [google-map-react-examples](https://github.com/google-map-react/google-map-react-examples)
|
116 |
|
117 | * jsbin example
|
118 | [jsbin example](https://jsbin.com/ruwogapuke/1/edit?js,output)
|
119 |
|
120 | * webpackbin examples (**new**)
|
121 | [docs with webpackbin examples](./DOC.md) (In progress)
|
122 |
|
123 | * local develop example (new)
|
124 | [develop example](./develop)
|
125 |
|
126 | ## Documentation
|
127 |
|
128 | You can find the documentation here:
|
129 |
|
130 | - [API Reference](./API.md)
|
131 |
|
132 | - [NEW DOCS](./DOC.md) (In progress)
|
133 |
|
134 | ## Contribute
|
135 |
|
136 | To get a reloadable env, with map, clone this project and
|
137 |
|
138 | ```shell
|
139 | npm install
|
140 | npm run start
|
141 | # open browser at localhost:4000
|
142 | ```
|
143 |
|
144 | ## Thank you
|
145 |
|
146 | (*Really big thanks to [April Arcus](https://github.com/AprilArcus) for documentation fixes*)
|
147 |
|
148 | (*thank you [Dan Abramov](http://gaearon.github.io/react-dnd/) for titles structure*)
|
149 |
|
150 | (*great thanks to [Vladimir Akimov](https://github.com/b2whats) he knows why*)
|
151 |
|
152 | ## License
|
153 |
|
154 | MIT (http://www.opensource.org/licenses/mit-license.php)
|
155 |
|
156 | ## Known Issues
|
157 |
|
158 | * Older browsers (http://caniuse.com/#feat=promises) will need a ES6 Promise polyfill in order to work.
|
159 |
|
160 | ## !!! We are looking for contributors
|
161 | We're actively looking for contributors, please send a message to the Owner or any of the Collaborators.
|