I am having difficulty adding Google Maps to my App…
Class App.js
class App extends React.Component {
constructor(props){
super(props);
this.loadScript = this.loadScript.bind(this);
}
loadScript(){
const API_KEY = process.env.REACT_APP_API_KEY;
const url = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}&libraries=places`;
const s = document.createElement("script");
s.src=url;
document.head.appendChild(s);
}
componentWillMount(){
this.loadScript();
}
render(){
return (
<div>
<Map />
</div>
);
}
}
export default App;
Class Map.js
export default class Map extends React.Component{
constructor(props){
super(props);
this.loadMap = this.loadMap.bind(this);
}
loadMap(){
const map = new window.google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
componentWillMount(){
this.loadMap();
}
render(){
return (
<div id="map" style={{width:100, height:100}}></div>
);
}
}