google-map-react custom skins

Question

Im using react and the google-map-react component. im trying to add a skin to my google maps. any idea where i do this? Im trying to use a snazzymap skin, they provide an array of styles.

https://snazzymaps.com/style/25/blue-water

snazzy maps provides the

import React from 'react';
import ReactDom from 'react-dom';
//import shouldPureComponentUpdate from 'react-pure-render/function';

import GoogleMap from 'google-map-react';
var divStyle = {
  paddingTop: 20,
  paddingLeft: 20,
  paddingRight: 20,
  width:1024,
  height:768
};
const K_WIDTH = 40;
const K_HEIGHT = 40;

const greatPlaceStyle = {
  // initially any map object has left top corner at lat lng coordinates
  // it's on you to set object origin to 0,0 coordinates
  position: 'absolute',
  width: K_WIDTH,
  height: K_HEIGHT,
  left: -K_WIDTH / 2,
  top: -K_HEIGHT / 2,

  border: '5px solid #f44336',
  borderRadius: K_HEIGHT,
  backgroundColor: 'white',
  textAlign: 'center',
  color: '#3f51b5',
  fontSize: 16,
  fontWeight: 'bold',
  padding: 4
};

class MyGreatPlace extends React.Component {

  static propTypes = {
    text: React.PropTypes.string
  };

  static defaultProps = {};

  //shouldComponentUpdate = shouldPureComponentUpdate;

  constructor(props) {
    super(props);
  }

  render() {
    return (
       <div style={greatPlaceStyle}>
          {this.props.text}
       </div>
    );
  }
}
class SimpleMapPage extends React.Component {

  static defaultProps = {
    defaultCenter: {lat: 59.938043, lng: 30.337157},
    zoom: 12,
    greatPlaceCoords: {lat: 59.724465, lng: 30.080121}
  };

  //shouldComponentUpdate = shouldPureComponentUpdate;

  constructor(props) {
    super(props);
  }

  componentWillReceiveProps(nextProps) {
    // console.log("test")
}

  render() {
    return (
       <div style={divStyle}>
       <GoogleMap
        bootstrapURLKeys={{
          key: '312312j3kl12j321random'
        }}
        center={this.props.center}
        zoom={this.props.zoom}
        defaultCenter={this.props.defaultCenter}
        defaultZoom={this.props.zoom}
        >
        <MyGreatPlace lat={this.props.center.lat} lng={this.props.center.lng} text={'Site'} /* Kreyser Avrora */ />

      </GoogleMap>
      </div>
    );
  }
}

export default SimpleMapPage

Answer 1

For google-map-react put styles in options:

<GoogleMap
    options={{
        styles: [{ stylers: [{ 'saturation': 50 }, { 'gamma': 0.5 }] }]
    }}>
</GoogleMap>

Answer 2

The place to load your mapStyle in google-map-react is in <GoogleMap></GoogleMap> tag like so:

<GoogleMap
    // other map attributes like defaultCenter and defaultZoom
    defaultOptions={{
        styles: require(`../../constants/fancyMapStyles.json`),
    }}>
</GoogleMap>

see here for more detail: http://tomchentw.github.io/react-google-maps/#/basics/styled-map?_k=5el6q8