Problem With Adding Custom Styling to ReactJS Google Map - reactjs

Question

I am trying to add custom styling to my google map on React JS, but I keep running into the same problem.
When I implement the styling(I have tried it in several ways) and launch my app the map disappears and instead I only have a white screen(however, the map shows when I run the default styling).
Here is my code:
import React, { Component } from 'react';
import { Map, GoogleApiWrapper, InfoWindow, Marker } from 'google-maps-react';
const key = 'key'
export class MapContainer extends Component {
state = {
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {},
markers: [
//Array of markers
],
};
onMarkerClick = (props, marker, e) =>
this.setState({
selectedPlace: props,
activeMarker: marker,
showingInfoWindow: true
});
onClose = props => {
if (this.state.showingInfoWindow) {
this.setState({
showingInfoWindow: false,
activeMarker: null
});
}
};
render() {
return (
<Map
google={this.props.google}
zoom={14}
style={this.props.mapStyles}
initialCenter={{ lat: 49.166590, lng: -123.133569 }}
>
{this.state.markers.map((marker, index) => (
<Marker
key={index}
onClick={this.onMarkerClick}
name={marker.name}
position={marker.position}
/>
))}
<InfoWindow
marker={this.state.activeMarker}
visible={this.state.showingInfoWindow}
onClose={this.onClose}
>
<div>
<h4>{this.state.selectedPlace.name}</h4>
</div>
</InfoWindow>
</Map>
);
}
}
MapContainer.defaultProps = {
mapStyles: [
{
elementType: 'geometry',
stylers: [
{
color: '#242f3e'
}
]
},
{
elementType: 'labels.text.fill',
stylers: [
{
color: '#746855'
}
]
},
{
elementType: 'labels.text.stroke',
stylers: [
{
color: '#242f3e'
}
]
},
{
featureType: 'administrative.land_parcel',
elementType: 'labels',
stylers: [
{
visibility: 'off'
}
]
},
{
featureType: 'administrative.locality',
elementType: 'labels.text.fill',
stylers: [
{
color: '#d59563'
}
]
},
{
featureType: 'poi',
elementType: 'labels.text',
stylers: [
{
visibility: 'off'
}
]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [
{
color: '#d59563'
}
]
},
{
featureType: 'poi.business',
stylers: [
{
visibility: 'off'
}
]
},
{
featureType: 'poi.park',
elementType: 'geometry',
stylers: [
{
color: '#263c3f'
}
]
},
{
featureType: 'poi.park',
elementType: 'labels.text',
stylers: [
{
visibility: 'off'
}
]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [
{
color: '#6b9a76'
}
]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [
{
color: '#38414e'
}
]
},
{
featureType: 'road',
elementType: 'geometry.stroke',
stylers: [
{
color: '#212a37'
}
]
},
{
featureType: 'road',
elementType: 'labels.text.fill',
stylers: [
{
color: '#9ca5b3'
}
]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [
{
color: '#746855'
}
]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [
{
color: '#1f2835'
}
]
},
{
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [
{
color: '#f3d19c'
}
]
},
{
featureType: 'road.local',
elementType: 'labels',
stylers: [
{
visibility: 'off'
}
]
},
{
featureType: 'transit',
elementType: 'geometry',
stylers: [
{
color: '#2f3948'
}
]
},
{
featureType: 'transit.station',
elementType: 'labels.text.fill',
stylers: [
{
color: '#d59563'
}
]
},
{
featureType: 'water',
elementType: 'geometry',
stylers: [
{
color: '#17263c'
}
]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [
{
color: '#515c6d'
}
]
},
{
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [
{
color: '#17263c'
}
]
}
]
}
export default GoogleApiWrapper({
apiKey: key
})(MapContainer);
Been struggling with this for a couple hours, turned Google inside out for tutorials and followed many several times but to no avail. Any help would be greatly appreciated :)

Answer 1

I successfully implemented custom mapstyle using the syntax from the google-maps-react library documentation.
Here is my sample code. Make sure to change the value of the API key in the GoogleApiWrapper for the code to run. You can also use the Google Maps Styling Wizard to easily create styles for your map.
import React, { Component } from "react";
import { Map, Marker, GoogleApiWrapper } from "google-maps-react";
const mapStyle = [
{
elementType: "geometry",
stylers: [
{
color: "#1d2c4d"
}
]
},
{
elementType: "labels.text.fill",
stylers: [
{
color: "#8ec3b9"
}
]
},
{
elementType: "labels.text.stroke",
stylers: [
{
color: "#1a3646"
}
]
},
{
featureType: "administrative.country",
elementType: "geometry.stroke",
stylers: [
{
color: "#4b6878"
}
]
},
{
featureType: "administrative.land_parcel",
elementType: "labels.text.fill",
stylers: [
{
color: "#64779e"
}
]
},
{
featureType: "administrative.province",
elementType: "geometry.stroke",
stylers: [
{
color: "#4b6878"
}
]
},
{
featureType: "landscape.man_made",
elementType: "geometry.stroke",
stylers: [
{
color: "#334e87"
}
]
},
{
featureType: "landscape.natural",
elementType: "geometry",
stylers: [
{
color: "#023e58"
}
]
},
{
featureType: "poi",
elementType: "geometry",
stylers: [
{
color: "#283d6a"
}
]
},
{
featureType: "poi",
elementType: "labels.text.fill",
stylers: [
{
color: "#6f9ba5"
}
]
},
{
featureType: "poi",
elementType: "labels.text.stroke",
stylers: [
{
color: "#1d2c4d"
}
]
},
{
featureType: "poi.park",
elementType: "geometry.fill",
stylers: [
{
color: "#023e58"
}
]
},
{
featureType: "poi.park",
elementType: "labels.text.fill",
stylers: [
{
color: "#3C7680"
}
]
},
{
featureType: "road",
elementType: "geometry",
stylers: [
{
color: "#304a7d"
}
]
},
{
featureType: "road",
elementType: "labels.text.fill",
stylers: [
{
color: "#98a5be"
}
]
},
{
featureType: "road",
elementType: "labels.text.stroke",
stylers: [
{
color: "#1d2c4d"
}
]
},
{
featureType: "road.highway",
elementType: "geometry",
stylers: [
{
color: "#2c6675"
}
]
},
{
featureType: "road.highway",
elementType: "geometry.stroke",
stylers: [
{
color: "#255763"
}
]
},
{
featureType: "road.highway",
elementType: "labels.text.fill",
stylers: [
{
color: "#b0d5ce"
}
]
},
{
featureType: "road.highway",
elementType: "labels.text.stroke",
stylers: [
{
color: "#023e58"
}
]
},
{
featureType: "transit",
elementType: "labels.text.fill",
stylers: [
{
color: "#98a5be"
}
]
},
{
featureType: "transit",
elementType: "labels.text.stroke",
stylers: [
{
color: "#1d2c4d"
}
]
},
{
featureType: "transit.line",
elementType: "geometry.fill",
stylers: [
{
color: "#283d6a"
}
]
},
{
featureType: "transit.station",
elementType: "geometry",
stylers: [
{
color: "#3a4762"
}
]
},
{
featureType: "water",
elementType: "geometry",
stylers: [
{
color: "#0e1626"
}
]
},
{
featureType: "water",
elementType: "labels.text.fill",
stylers: [
{
color: "#4e6d70"
}
]
}
];
export class MapContainer extends Component {
_mapLoaded(mapProps, map) {
map.setOptions({
styles: mapStyle
});
}
render() {
const coords = { lat: -21.805149, lng: -49.0921657 };
return (
<Map
style={this.mapStyle}
google={this.props.google}
zoom={7}
initialCenter={coords}
onReady={(mapProps, map) => this._mapLoaded(mapProps, map)}
>
<Marker position={coords} />
</Map>
);
}
}
export default GoogleApiWrapper({
apiKey: "YOUR_API_KEY"
})(MapContainer);
Hope this helps!

Answer 2

You can use default props for this. The custom Style json data should be a default props. Here is a working solution :
import React, { Component } from "react";
import { Map, GoogleApiWrapper } from "google-maps-react";
export class MapContainer extends Component {
render() {
return (
<Map
google={this.props.google}
zoom={14}
styles={this.props.mapStyles}
initialCenter={{
lat: 51.1657,
lng: 10.4515,
}}
/>
);
}
}
//this is how you make the style a defaultprops for the component.
//best way is to add the design json data in a separte line
// go here for different Map style and customization : http://snazzymaps.com/
MapContainer.defaultProps = {
mapStyles: [
{
"featureType": "all",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "all",
"elementType": "labels.text",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [
{
"saturation": 36
},
{
"color": "#111111"
},
{
"lightness": 60
}
]
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "on"
},
{
"color": "#000000"
},
{
"lightness": 16
}
]
},
{
"featureType": "all",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
},
{
"weight": 1.2
}
]
},
{
"featureType": "administrative",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "administrative",
"elementType": "labels.text",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "administrative.country",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "administrative.country",
"elementType": "geometry",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "administrative.country",
"elementType": "labels.text",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "administrative.province",
"elementType": "all",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
},
{
"saturation": "-100"
},
{
"lightness": "30"
}
]
},
{
"featureType": "administrative.neighborhood",
"elementType": "all",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "all",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
},
{
"gamma": "0.00"
},
{
"lightness": "74"
}
]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 20
}
]
},
{
"featureType": "landscape",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "landscape",
"elementType": "labels.text",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "all",
"stylers": [
{
"lightness": "3"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 40
}
]
},
{
"featureType": "poi",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"visibility": "simplified"
},
{
"color": "#424242"
},
{
"lightness": "-61"
}
]
},
{
"featureType": "road",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "road",
"elementType": "labels.text",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 29
},
{
"weight": 0.2
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 18
}
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 16
}
]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#2a2727"
},
{
"lightness": "-61"
},
{
"saturation": "-100"
}
]
},
{
"featureType": "transit",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
}
]
},
{
"featureType": "water",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "water",
"elementType": "labels.text",
"stylers": [
{
"visibility": "on"
}
]
}
]
};
export default GoogleApiWrapper({
apiKey: "your API key goes here",
})(MapContainer);