Merge pull request #1 from fullstackreact/master

test

Author: riktov

.github/workflows/npmpublish.yml

@@ -0,0 +1,45 @@
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - run: npm ci
+      - run: npm test
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
+
+  publish-gpr:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+          registry-url: https://npm.pkg.github.com/
+          scope: '@your-github-username'
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

.gitignore

@@ -8,3 +8,4 @@ npm-debug.log
 node_modules
 .env
 public/
+dist

README.md

@@ -103,7 +103,23 @@ const style = {
   height: '100%'
 }
 ```
-initalCenter: Takes an object containing latitude and longitude coordinates. Sets the maps center upon loading.
+
+Container Style: Takes CSS style object - optional, commonly when you want to change from the default of position "absolute".
+
+```javascript
+const containerStyle = {
+  position: 'relative',  
+  width: '100%',
+  height: '100%'
+}
+```
+
+```javascript
+    <Map
+          containerStyle={containerStyle}
+```
+
+initialCenter: Takes an object containing latitude and longitude coordinates. Sets the maps center upon loading.
 
 ```javascript
     <Map
@@ -229,7 +245,7 @@ render() {
 }
 ```
 
-The `<Map />` component also listens to `onRecenter`, `onBoundsChanged`, `onCenterChanged`, `onDblclick`, `onDragstart`, `onHeadingChange`, `onIdle`, `onMaptypeidChanged`, `onMousemove`, `onMouseout`, `onMouseover`, `onProjectionChanged`, `onResize`, `onRightclick`, `onTilesloaded`, `onTiltChanged`, and `onZoomChanged` events. See Google Maps [Events](https://developers.google.com/maps/documentation/javascript/events) for more information.
+The `<Map />` component also listens to `onRecenter`, `onBounds_changed`, `onCenter_changed`, `onDblclick`, `onDragstart`, `onHeading_change`, `onIdle`, `onMaptypeid_changed`, `onMousemove`, `onMouseout`, `onMouseover`, `onProjection_changed`, `onResize`, `onRightclick`, `onTilesloaded`, `onTilt_changed`, and `onZoom_changed` events. See Google Maps [Events](https://developers.google.com/maps/documentation/javascript/events) for more information.
 
 ### Visibility
 
@@ -534,6 +550,45 @@ The `<Circle />` component listens to `onClick`, `onMouseover` and `onMouseout`
 
 The `GoogleApiWrapper` automatically passes the `google` instance loaded when the component mounts (and will only load it once).
 
+#### Custom Map Style
+
+To set your own custom map style, import your custom map style in JSON format.
+
+```javascript
+const mapStyle = [
+  {
+    featureType: 'landscape.man_made',
+    elementType: 'geometry.fill',
+    stylers: [
+      {
+        color: '#dceafa'
+      }
+    ]
+  },
+  ]
+
+ _mapLoaded(mapProps, map) {
+    map.setOptions({
+       styles: mapStyle
+    })
+ }
+
+render() {
+  return (
+    <Map
+      style={style}
+      google={this.props.google}
+      zoom={this.state.zoom}
+      initialCenter={this.state.center}
+      onReady={(mapProps, map) => this._mapLoaded(mapProps, map)}
+    >
+      ...
+    </Map>
+   );
+ }
+      
+```
+
 ## 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 `<Map />` component.