File tree 1 file changed +39
-0
lines changed
1 file changed +39
-0
lines changed Original file line number Diff line number Diff line change @@ -550,6 +550,45 @@ The `<Circle />` component listens to `onClick`, `onMouseover` and `onMouseout`
550
550
551
551
The ` GoogleApiWrapper ` automatically passes the ` google ` instance loaded when the component mounts (and will only load it once).
552
552
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
+
553
592
## Manually loading the Google API
554
593
555
594
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.
You can’t perform that action at this time.
0 commit comments