File tree Expand file tree Collapse file tree 1 file changed +39
-0
lines changed Expand file tree Collapse file tree 1 file changed +39
-0
lines changed Original file line number Diff line number Diff line change @@ -534,6 +534,45 @@ The `<Circle />` component listens to `onClick`, `onMouseover` and `onMouseout`
534534
535535The ` 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
539578If you prefer not to use the automatic loading option, you can also pass the ` window.google ` instance as a ` prop ` to your ` <Map /> ` component.
You can’t perform that action at this time.
0 commit comments