You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+36-15
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,13 @@
1
-
# Google Map React component
2
1
3
-

2
+
<palign="center">
3
+
<imgsrc="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
4
7
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.
6
9
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/).
8
11
9
12
## Quickstart
10
13
@@ -30,6 +33,8 @@ Usage:
30
33
</Map>
31
34
```
32
35
36
+

37
+
33
38
## Map
34
39
35
40
The `<Map />` component _requires_ a `google` prop be included to work. Without the `google` prop, it will explode.
@@ -103,7 +108,7 @@ React.createClass({
103
108
104
109
### Visibility
105
110
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)
107
112
108
113
For example:
109
114
@@ -118,9 +123,9 @@ For example:
118
123
119
124
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):
120
125
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
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.
195
200
196
201

197
202
@@ -265,11 +270,11 @@ The `onClose` event is fired when the `<InfoWindow />` has been closed. It's use
265
270
266
271
#### onOpen
267
272
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.
269
274
270
-
## Automatically Lazy-loading google api
275
+
## Automatically Lazy-loading Google API
271
276
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.
The `GoogleApiWrapper` automatically passes the `google` instance loaded when the component mounts (and will only load it once).
287
292
288
-
## Manually loading the google api
293
+
## Manually loading the Google API
289
294
290
295
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.
291
296
@@ -298,8 +303,24 @@ npm install
298
303
make dev
299
304
```
300
305
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.
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.
0 commit comments