Skip to content

Commit b2023a7

Browse files
committed
cleanup readme
1 parent fdab3e1 commit b2023a7

File tree

4 files changed

+38
-17
lines changed

4 files changed

+38
-17
lines changed

LICENSE

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The MIT License (MIT)
22

3-
Copyright (c) 2015 Julian Ćwirko <julian.io>
3+
Copyright (c) 2015 Fullstack.io <fullstack.io>
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21-
THE SOFTWARE.
21+
THE SOFTWARE.

README.md

+36-15
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
# Google Map React component
21

3-
![](http://d.pr/i/C7qr.png)
2+
<p align="center">
3+
<img src="resources/readme/fullstackreact-google-maps-tutorial.png" alt="Fullstack React Google Maps Tutorial" width="500" height="299"/>
4+
</p>
5+
6+
# Google Map React Component Tutorial
47

5-
> A declarative Google Map React component using React, lazy-loading dependencies, current-location finder and a test-driven approach by the [fullstack react](https://fullstackreact.com) team.
8+
> A declarative Google Map React component using React, lazy-loading dependencies, current-location finder and a test-driven approach by the [Fullstack React](https://fullstackreact.com) team.
69
7-
See the [demo](https://fullstackreact.github.io/google-maps-react).
10+
See the [demo](https://fullstackreact.github.io/google-maps-react) and [accompanying blog post](https://www.fullstackreact.com/articles/how-to-write-a-google-maps-react-component/).
811

912
## Quickstart
1013

@@ -30,6 +33,8 @@ Usage:
3033
</Map>
3134
```
3235

36+
![](http://d.pr/i/C7qr.png)
37+
3338
## Map
3439

3540
The `<Map />` component _requires_ a `google` prop be included to work. Without the `google` prop, it will explode.
@@ -103,7 +108,7 @@ React.createClass({
103108

104109
### Visibility
105110

106-
You can control the visibility of the map by using the `visible` prop. This is useful for situations when you want to use the Google Maps API without a map. The `<Map />` component will load like normal. See the [google places demo](https://fullstackreact.github.io/google-maps-react/#/places)
111+
You can control the visibility of the map by using the `visible` prop. This is useful for situations when you want to use the Google Maps API without a map. The `<Map />` component will load like normal. See the [Google places demo](https://fullstackreact.github.io/google-maps-react/#/places)
107112

108113
For example:
109114

@@ -118,9 +123,9 @@ For example:
118123

119124
The `<Map />` api includes subcomponents intended on being used as children of the `Map` component. Any child can be used within the `Map` component and will receive the three `props` (as children):
120125

121-
* map - the Google instance of the `map`
122-
* google - a reference to the `window.google` object
123-
* mapCenter - the `google.maps.LatLng()` object referring to the center of the map instance
126+
* `map` - the Google instance of the `map`
127+
* `google` - a reference to the `window.google` object
128+
* `mapCenter` - the `google.maps.LatLng()` object referring to the center of the map instance
124129

125130
### Marker
126131

@@ -191,7 +196,7 @@ const Container = React.createClass({
191196

192197
### InfoWindow
193198

194-
The `<InfoWindow />` component included in this library is gives us the ability to pop up a "more info" window on our google map.
199+
The `<InfoWindow />` component included in this library is gives us the ability to pop up a "more info" window on our Google map.
195200

196201
![](http://d.pr/i/16w0V.png)
197202

@@ -265,11 +270,11 @@ The `onClose` event is fired when the `<InfoWindow />` has been closed. It's use
265270

266271
#### onOpen
267272

268-
The `onOpen` event is fired when the window has been mounted in the google map instance. It's useful for keeping track of the state of the `<InfoWindow />` from within the parent component.
273+
The `onOpen` event is fired when the window has been mounted in the Google map instance. It's useful for keeping track of the state of the `<InfoWindow />` from within the parent component.
269274

270-
## Automatically Lazy-loading google api
275+
## Automatically Lazy-loading Google API
271276

272-
The library includes a helper to wrap around the google maps API. The `GoogleApiWrapper` Higher-Order component accepts a configuration object which *must* include an `apiKey`. See [lib/GoogleApi.js](https://github.com/fullstackreact/google-maps-react/blob/master/src/lib/GoogleApi.js#L4) for all options it accepts.
277+
The library includes a helper to wrap around the Google maps API. The `GoogleApiWrapper` Higher-Order component accepts a configuration object which *must* include an `apiKey`. See [lib/GoogleApi.js](https://github.com/fullstackreact/google-maps-react/blob/master/src/lib/GoogleApi.js#L4) for all options it accepts.
273278

274279
```javascript
275280
import {GoogleApiWrapper} from 'GoogleMapsReactComponent'
@@ -285,7 +290,7 @@ export default GoogleApiWrapper({
285290

286291
The `GoogleApiWrapper` automatically passes the `google` instance loaded when the component mounts (and will only load it once).
287292

288-
## Manually loading the google api
293+
## Manually loading the Google API
289294

290295
If you prefer not to use the automatic loading option, you can also pass the `window.google` instance as a `prop` to your `<Map />` component.
291296

@@ -298,8 +303,24 @@ npm install
298303
make dev
299304
```
300305

301-
The Google Map React component library uses React and the Google API to give easy access to the Google Maps library. This Google Map React component library was built alongside the blog post [blog.fullstack.io/articles/react-google-map-component/](http://blog.fullstack.io/articles/react-google-map-component/).
306+
The Google Map React component library uses React and the Google API to give easy access to the Google Maps library.
307+
308+
___
309+
310+
# Fullstack React Book
311+
312+
<a href="https://fullstackreact.com">
313+
<img align="right" src="resources/readme/fullstack-react-hero-book.png" alt="Fullstack React Book" width="155" height="250" />
314+
</a>
315+
316+
This Google Map React component library was built alongside the blog post [How to Write a Google Maps React Component](https://www.fullstackreact.com/articles/how-to-write-a-google-maps-react-component/).
317+
318+
This repo was written and is maintained by the [Fullstack React](https://fullstackreact.com) team. In the book we cover many more projects like this. We walk through each line of code, explain why it's there and how it works.
319+
320+
This app is only one of several apps we have in the book. If you're looking to learn React, there's no faster way than by spending a few hours with the Fullstack React book.
302321

322+
<div style="clear:both"></div>
303323

324+
## License
325+
[MIT](/LICENSE)
304326

305-
[fullstackreact.com](https://fullstackreact.com)
83.1 KB
Loading
Loading

0 commit comments

Comments
 (0)