I am creating an web app with ReactJS
& there I have to use Google Map to show some data from NASA API
Project Info
- I have created
no billing
freeAPI Key
on Google Developer - I have created
.env
on my React project & use with `process.env.REACT_APP_API_KEY - I have installed & imported
google-map-react
API Info
- I have enable
JavaScript Map API
- App restriction selected `HTTP referrers(web sites)
- Website restriction set
*localhost:3000
http://localhost:3000
- API restriction
- Restrict Key -> Map JavaScript API
Problem
- I have clear
cached & cookies
&restart
server many times but it show me
This page can’t load Google Maps correctly. Do you own this website? For development purposes only
Code
import GoogleMapReact from 'google-map-react'
import '../style/index.css'
const Map = ({ center, zoom }) => {
return (
<div className='map'>
<GoogleMapReact
bootstrapURLKeys={{
key: process.env.REACT_APP_API_KEY
}}
defaultCenter={center}
defaultZoom={zoom}
>
</GoogleMapReact>
</div>
)
}
Map.defaultProps = {
center: {
lat: 42.3265,
lng: -122.8756
},
zoom: 3
}
export default Map