Custom styled Google map in react-google-maps

Question

I'm trying to give my google map a different look. I'm taking this code as an instruction on how to do it: https://github.com/wuct/react-google-maps/blob/21d70d0afd03aa802cdc69028c8ead2f35b3c1ce/examples/gh-pages/scripts/components/basics/StyledMap.js#L40-L43

My code looks like this so far:

import "./UserReportsMap.css"

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps'

const Map = withGoogleMap(props => (
    <GoogleMap
        defaultZoom={8}
        defaultCenter={{ lat: 53.55, lng: 10.00 }}
        defaultOptions={{
            scrollwheel: false,
            streetViewControl: false
        }}
        >
        {props.markers.map((marker, index) => (
            <Marker
                {...marker}
            />
        ))}
    </GoogleMap>
    )
)

class UserReportsMap extends Component {

static getCloudEmoji(report) {
    return "/img/noto/" + report.info.clouds + ".png"}

mapReportsToMarkers = reports => (
    reports.map(report => ({
        position: {
            lat: report.info.position.latitude,
            lng: report.info.position.longitude
        },
        defaultAnimation: 2,
        key: report.id,
        options: {
            icon: UserReportsMap.getCloudEmoji(report)
        }
    }))
)

render() {
    return (
        <div className="report-map">
            <Map
                containerElement={
                    <div style={{ height: '100%' }} />
                }
                mapElement={
                    <div style={{ height: '100%' }} />
                }
                markers={this.mapReportsToMarkers(this.props.reports)}
                styles={mapStyles}
                />
        </div>
    )
     }
}

StyledMap.defaultProps = {
// The style is copy from https://snazzymaps.com/style/2/midnight-commander
mapStyles: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"color":"#000000"},{"lightness":13}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#144b53"},{"lightness":14},{"weight":1.4}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#08304b"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#0c4152"},{"lightness":5}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#0b434f"},{"lightness":25}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#000000"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#0b3d51"},{"lightness":16}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"}]},{"featureType":"transit","elementType":"all","stylers":[{"color":"#146474"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#021019"}]}]
 }

function mapStateToProps(state) {
    return {
         reports: state.reports.all
     }
}

export default connect(mapStateToProps, null)(UserReportsMap)

I keep getting the error

./src/page/weather/UserReportsMap/UserReportsMap.js
Line 55:  'mapStyles' is not defined  no-undef
Line 62:  'StyledMap' is not defined  no-undef

Can anybody help? What am I doing wrong?

Answer 1

Using react.google.maps you can style your map using the following way:

const exampleMapStyles = [
    {
        featureType: "poi",
        elementType: "geometry",
        stylers: [
            {
                color: "#eeeeee",
            },
        ],
    },
    {
        featureType: "poi",
        elementType: "labels.text",
        stylers: [
            {
                visibility: "off",
            },
        ],
    },
    {
        featureType: "water",
        elementType: "labels.text.fill",
        stylers: [
            {
                color: "#9e9e9e",
            },
        ],
    },
];

const gogleMap = (
    <GoogleMap
        options={{
            styles: exampleMapStyles,
        }}
        defaultZoom={8}
        defaultCenter={{ lat: -34.397, lng: 150.644 }}
    >
        <Marker position={{ lat: -34.397, lng: 150.644 }} />
    </GoogleMap>
);

Or

const gogleMap = (
        <GoogleMap
            defaultOptions={{
                styles: exampleMapStyles,
            }}
            defaultZoom={8}
            defaultCenter={{ lat: -34.397, lng: 150.644 }}
        >
            <Marker position={{ lat: -34.397, lng: 150.644 }} />
        </GoogleMap>
    );

You won't find it in the official doc. But, this works.