diff --git a/LICENSE b/LICENSE index 6addbc9a..dbc44890 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2015 Julian Ćwirko +Copyright (c) 2015 Fullstack.io Permission is hereby granted, free of charge, to any person obtaining a copy 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 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN -THE SOFTWARE. \ No newline at end of file +THE SOFTWARE. diff --git a/README.md b/README.md index 15dce2dd..9dd988af 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,13 @@ -# Google Map React component -![](http://d.pr/i/C7qr.png) +

+ Fullstack React Google Maps Tutorial +

+ +# Google Map React Component Tutorial -> 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. +> 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. -See the [demo](https://fullstackreact.github.io/google-maps-react). +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/). ## Quickstart @@ -30,6 +33,8 @@ Usage: ``` +![](http://d.pr/i/C7qr.png) + ## Map The `` component _requires_ a `google` prop be included to work. Without the `google` prop, it will explode. @@ -103,7 +108,7 @@ React.createClass({ ### Visibility -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 `` component will load like normal. See the [google places demo](https://fullstackreact.github.io/google-maps-react/#/places) +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 `` component will load like normal. See the [Google places demo](https://fullstackreact.github.io/google-maps-react/#/places) For example: @@ -118,9 +123,9 @@ For example: The `` 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): -* map - the Google instance of the `map` -* google - a reference to the `window.google` object -* mapCenter - the `google.maps.LatLng()` object referring to the center of the map instance +* `map` - the Google instance of the `map` +* `google` - a reference to the `window.google` object +* `mapCenter` - the `google.maps.LatLng()` object referring to the center of the map instance ### Marker @@ -191,7 +196,7 @@ const Container = React.createClass({ ### InfoWindow -The `` component included in this library is gives us the ability to pop up a "more info" window on our google map. +The `` component included in this library is gives us the ability to pop up a "more info" window on our Google map. ![](http://d.pr/i/16w0V.png) @@ -265,11 +270,11 @@ The `onClose` event is fired when the `` has been closed. It's use #### onOpen -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 `` from within the parent component. +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 `` from within the parent component. -## Automatically Lazy-loading google api +## Automatically Lazy-loading Google API -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. +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. ```javascript import {GoogleApiWrapper} from 'GoogleMapsReactComponent' @@ -285,7 +290,7 @@ export default GoogleApiWrapper({ The `GoogleApiWrapper` automatically passes the `google` instance loaded when the component mounts (and will only load it once). -## Manually loading the google api +## Manually loading the Google API If you prefer not to use the automatic loading option, you can also pass the `window.google` instance as a `prop` to your `` component. @@ -298,8 +303,24 @@ npm install make dev ``` -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/). +The Google Map React component library uses React and the Google API to give easy access to the Google Maps library. + +___ + +# Fullstack React Book + + +Fullstack React Book + + +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/). + +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. + +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. +
+## License + [MIT](/LICENSE) -[fullstackreact.com](https://fullstackreact.com) diff --git a/resources/readme/fullstack-react-hero-book.png b/resources/readme/fullstack-react-hero-book.png new file mode 100644 index 00000000..f0ead3b6 Binary files /dev/null and b/resources/readme/fullstack-react-hero-book.png differ diff --git a/resources/readme/fullstackreact-google-maps-tutorial.png b/resources/readme/fullstackreact-google-maps-tutorial.png new file mode 100644 index 00000000..f2f36688 Binary files /dev/null and b/resources/readme/fullstackreact-google-maps-tutorial.png differ