Skip to content

Commit dd60e72

Browse files
authored
Update README.md
README now includes instructions to include custom map styling.
1 parent c70a04f commit dd60e72

File tree

1 file changed

+39
-0
lines changed

1 file changed

+39
-0
lines changed

README.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -534,6 +534,45 @@ The `<Circle />` component listens to `onClick`, `onMouseover` and `onMouseout`
534534

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

537+
#### Custom Map Style
538+
539+
To set your own custom map style, import your custom map style in JSON format.
540+
541+
```javascript
542+
const mapStyle = [
543+
{
544+
featureType: 'landscape.man_made',
545+
elementType: 'geometry.fill',
546+
stylers: [
547+
{
548+
color: '#dceafa'
549+
}
550+
]
551+
},
552+
]
553+
554+
_mapLoaded(mapProps, map) {
555+
map.setOptions({
556+
styles: mapStyle
557+
})
558+
}
559+
560+
render() {
561+
return (
562+
<Map
563+
style={style}
564+
google={this.props.google}
565+
zoom={this.state.zoom}
566+
initialCenter={this.state.center}
567+
onReady={(mapProps, map) => this._mapLoaded(mapProps, map)}
568+
>
569+
...
570+
</Map>
571+
);
572+
}
573+
574+
```
575+
537576
## Manually loading the Google API
538577

539578
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)