CODEWITHSUNDEEP
javascriptreactjsgoogle-maps
anderish
anderish

Reputation: 1759

google-map-react: Adding circle radius

I want to add a red circle radius around my center. I am using this package https://github.com/google-map-react/google-map-react and here is my code:

<GoogleMapReact
      bootstrapURLKeys={{key: this.googleAPIKey}}
      defaultCenter={{lat: this.props.latitude, lng: this.props.longitude}}
      defaultZoom={this.props.zoom}
      yesIWantToUseGoogleMapApiInternals={true}
      onGoogleApiLoaded={({map, maps}) =>
        new google.maps.Circle({
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.3,
          map,
          center: {lat: this.props.latitude, lng: this.props.longitude},
          radius: 275,
        })}
        >
      <AnyReactComponent
        lat={this.props.latitude}
        lng={this.props.longitude}
      />
    </GoogleMapReact>

However, i get the following error:

enter image description here

I followed the instructions in the docs and tried googling how to solve this issue. Any ideas?

Upvotes: 1

Views: 5359

Answers (2)

Harry
Harry

Reputation: 13329

Just do :

 onGoogleApiLoaded={({ map, maps }) =>
        new maps.Circle({

Upvotes: 4

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59338

Apparently this error occurs since Google Maps API could not be loaded/or it is getting loaded after the onGoogleApiLoaded function is invoked, that's the reason why this error occurs. It is unclear though to say why Google Maps API is failed to load since not enough details has been provided in the question.

According to google_map.js some addition details about error should be displayed in the console which could reveal why it happens: 

.catch(function (e) {
    // notify callback of load failure
    _this._onGoogleApiLoaded({ map: null, maps: null });
    console.error(e); // eslint-disable-line no-console
    throw e;
 });

But the example looks correct and this demo demonstrates how to draw a circle.

Upvotes: 0

Related Questions