Skip to content

Commit 33f69e9

Browse files
authored
Merge pull request #361 from AdamLee321/patch-1
Update README.md
2 parents 81839eb + dd60e72 commit 33f69e9

File tree

1 file changed

+39
-0
lines changed

1 file changed

+39
-0
lines changed

README.md

+39
Original file line numberDiff line numberDiff line change
@@ -550,6 +550,45 @@ The `<Circle />` component listens to `onClick`, `onMouseover` and `onMouseout`
550550

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

553+
#### Custom Map Style
554+
555+
To set your own custom map style, import your custom map style in JSON format.
556+
557+
```javascript
558+
const mapStyle = [
559+
{
560+
featureType: 'landscape.man_made',
561+
elementType: 'geometry.fill',
562+
stylers: [
563+
{
564+
color: '#dceafa'
565+
}
566+
]
567+
},
568+
]
569+
570+
_mapLoaded(mapProps, map) {
571+
map.setOptions({
572+
styles: mapStyle
573+
})
574+
}
575+
576+
render() {
577+
return (
578+
<Map
579+
style={style}
580+
google={this.props.google}
581+
zoom={this.state.zoom}
582+
initialCenter={this.state.center}
583+
onReady={(mapProps, map) => this._mapLoaded(mapProps, map)}
584+
>
585+
...
586+
</Map>
587+
);
588+
}
589+
590+
```
591+
553592
## Manually loading the Google API
554593

555594
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.

0 commit comments

Comments
 (0)