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`
534
534
535
535
The ` GoogleApiWrapper ` automatically passes the ` google ` instance loaded when the component mounts (and will only load it once).
536
536
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
+
537
576
## Manually loading the Google API
538
577
539
578
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