CODEWITHSUNDEEP
javascriptreactjsgoogle-mapsgatsby
user7332667
user7332667

Reputation:

google-map-react not loading

My Google Map gives following error: "Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details." I use Gatsby and google-map-react package. My code:

const AnyReactComponent = ({ text }) => <div>{text}</div>;

static defaultProps = {
    center: {
        lat: 59.95,
        lng: 30.33
    },
    zoom: 11
};

<div style={{ height: '50vh', width: '100%' }}>
    <GoogleMapReact
        bootstrapURLKeys={{ key: "https://maps.google.com/maps?q=manhatan&t=&z=13&ie=UTF8&iwloc=&output=embed" }}
        defaultCenter={this.props.center}
        defaultZoom={this.props.zoom}
    >
        <AnyReactComponent
            lat={59.955413}
            lng={30.337844}
            text="My Marker"
        />
    </GoogleMapReact>
</div>

Upvotes: 2

Views: 5360

Answers (1)

Avani Bataviya
Avani Bataviya

Reputation: 770

In bootstrapURLKeys you have to add google map api key not url. you can get key from google console https://developers.google.com/maps/documentation/javascript/get-api-key

 <GoogleMapReact
    bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }}
    ......
  />

Upvotes: 3

Related Questions