I am working on adding a Google maps in my web application. I found this great generator here and it gave me this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Google Maps</title>
</head>
<body>
<div id="map_canvas" style="width:500px;height:300px;"></div>
<script src="http://ift.tt/1kRCTVO"></script>
<script>
window.onload = function() {
initialize();
};
function initialize() {
var myLatlng = new google.maps.LatLng(50.3419169876, 5.60793614352);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var infowindow = new google.maps.InfoWindow({
content: "Someplace"
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Someplace"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</body>
</html>
So I take the scripts and paste them in my index.html file. The Google maps instance is supposed to be placed on the contact page. Obviously when I reload the page on /contact, I get the map loaded quickly. However since window is outside the scope in react, whenever I just navigate using my navbar, it does not work.
I have this GoogleMaps.js component which only contains the div of id map_canvas:
import React from 'react'
const GoogleMapsInstance = () => (
<div id="map_canvas" style= />
)
export default GoogleMapsInstance
I was wondering how I could get the scripts inside this component, so I could call the scripts on componentDidMount function or something like that.
I am also open to any other type of solution that gets me a fast loading (no iframe) google maps :)
Thanks for your help!
Aucun commentaire:
Enregistrer un commentaire