Google-maps-react: Circle is not rendering on google map with React Google Map's API

[ahlag]

I am trying to render a google circle with React's google maps api, but it doesn't show up. We didn't get any error messages. We don't understand why we cannot render the circle after following the instructions even though we have set the circle's defaultCenter and radius.

import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import bunnyHere from "../../../images/here.png";
import { Map, GoogleApiWrapper, Marker} from "google-maps-react";
import Circle from "google-maps-react";
import BackButton from "../../../components/Buttons/BackButton/BackButton";
import Button from "@material-ui/core/Button";

class FindHospitalPage extends Component {
  state = {
    markers: [
      { lat: 35.700688, lng: 139.772478 },
      { lat: 35.713521, lng: 139.799845 }
    ]
  };

  render() {
    return (
      <div>
        <div
          style={{
            display: "flex",
            justifyContent: "flex-end",
            marginRight: "15px"
          }}
        >
          <NavLink to="/homepage">
            <Button>Back To Homepage</Button>
          </NavLink>
        </div>
        <div>
          <Map
            google={this.props.google}
            zoom={15}
            style={mapStyles}
            initialCenter={{ lat: 35.707719, lng: 139.774846 }}
          >
            {this.state.markers.map((marker, i) => (
              <Marker key={i} position={marker} />
            ))}
            <Marker
              position={{ lat: 35.707719, lng: 139.774846 }}
              icon={bunnyHere}
              animation={this.props.google.maps.Animation.BOUNCE}
            />
            <Circle
                defaultCenter={{ lat: 35.707719, lng: 139.774846 }}
                defaultRadius={500}
                options={{
                  strokeColor: '#0022ff',
                  fillColor: '#0099ff',
                  fillOpacity: 0.1
                }}
            />
          </Map>
        </div>
        <BackButton buttonType={"buttonType_2"} backPage={"/checkout"} />
      </div>
    );
  }
}

// export default FindHospitalPage;
export default GoogleApiWrapper({
  apiKey: "XXX"
})(FindHospitalPage);

[Muttakee31]

Well I was looking for solving the same problem and stumbled upon your question https://stackoverflow.com/questions/59333380/circle-is-not-rendering-on-google-map-with-react-google-maps-api on stackoverflow. Then I was looking for solutions in git issues and here I am. :3
Have you found any solutions yet? Or did you follow the solution provided in the stackoverflow?

[ahlag]

@Muttakee31
The solution on https://stackoverflow.com/questions/59333380/circle-is-not-rendering-on-google-map-with-react-google-maps-api on stackoverflow works!

[Muttakee31]

@ahlag thanks!

[FredrikAugust]

Perhaps you should close this issue if the solution on stackoverflow works?