title: Google-Map-React Marker on Dark Mode Not Rendering
body: <p>I'm using an npm module called google-map-react in order to create a custom map on my website. This site shows how to make the basic marker work (<a href="https://levelup.gitconnected.com/reactjs-google-maps-with-custom-marker-ece0c7d184c4" rel="nofollow noreferrer">https://levelup.gitconnected.com/reactjs-google-maps-with-custom-marker-ece0c7d184c4</a>) and it should look something like this:</p>
  
  <pre><code>import React, { useState } from "react";
  import GoogleMapReact from "google-map-react";
  
  const AnyReactComponent = ({ text }: any) =&gt; &lt;div&gt;{text}&lt;/div&gt;;
  
  const SimpleMap = (props: any) =&gt; {
    const [center, setCenter] = useState({ lat: 11.0168, lng: 76.9558 });
    const [zoom, setZoom] = useState(11);
    return (
      &lt;div style={{ height: "100vh", width: "100%" }}&gt;
        &lt;GoogleMapReact
          bootstrapURLKeys={{ key: "add your api key" }}
          defaultCenter={center}
          defaultZoom={zoom}
        &gt;
          &lt;AnyReactComponent lat={11.0168} lng={76.9558} text="My Marker" /&gt;
        &lt;/GoogleMapReact&gt;
      &lt;/div&gt;
    );
  };
  
  export default SimpleMap;
  </code></pre>
  
  <p>However I'm trying to put in options to get a dark mode map on my website (which works), but unfortunately the marker renders first and then the map renders on top of it making the marker disappear. I'm not sure what the correct solution is, does anyone have any ideas? The code that I am working with is below.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div style={{ height: "50vh", width: "100%" }}&gt;
    &lt;GoogleMapReact
      bootstrapURLKeys={{ key: "SecretKey" }}
      defaultCenter={this.props.center}
      defaultZoom={this.props.zoom}
      options={{
        styles: [
          { elementType: "geometry", stylers: [{ color: "#242f3e" }] },
          { elementType: "labels.text.stroke", stylers: [{ color: "#242f3e" }] },
          { elementType: "labels.text.fill", stylers: [{ color: "#746855" }] },
          {
            featureType: "administrative.locality",
            elementType: "labels.text.fill",
            stylers: [{ color: "#d59563" }]
          },
          {
            featureType: "poi",
            elementType: "labels.text.fill",
            stylers: [{ color: "#d59563" }]
          },
          {
            featureType: "poi.park",
            elementType: "geometry",
            stylers: [{ color: "#263c3f" }]
          },
          {
            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: "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" }]
          }
        ]
      }}
    &gt;
      &lt;PlaceMarker lat={59.955413} lng={30.337844} text="My Marker" /&gt;
    &lt;/GoogleMapReact&gt;
  &lt;/div&gt;;
  </code></pre>
  
  <pre><code>class PlaceMarker extends Component {
    render() {
      return &lt;div style={placestyle}&gt;{this.props.text}&lt;/div&gt;;
    }
  }
  
  const K_WIDTH = 40;
  const K_HEIGHT = 40;
  
  const placestyle = {
    // 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
  };
  
  export default placestyle;
  </code></pre>