Google Maps JavaScript API not displaying in my React app
Question
I'm building a site with frontend/backend and have to use the Google Maps JS API. I'm rendering this:
render(){
return (
<body>
<script src="./mapa.js"></script>
<nav>
<ul class= "nav-links">
<li><a href="#"> <img class = "home_img" id = "1" src = {home} ></img> <div id="texto1"> <p>Home</p></div> </a></li>
<li><a href="#"> <img class = "home_img" id = "2" src = {alertas}></img> <div id="texto2"><p>Alertas</p></div> </a></li>
<li><a href="#"> <img class = "home_img" id = "3" src = {dashboards} ></img> <div id="texto3"><p>Dashboards</p></div></a></li>
<li><a href="#"> <img class = "home_img" id = "4" src = {locais} ></img> <div id="texto4"> <p>Os seus locais</p></div> </a></li>
<li><a href="#"> <img class = "home_img" id = "5" src = {ajuda} ></img> <div id="texto5"> <p>Ajuda</p></div> </a></li>
</ul>
<div class="burger" onClick={()=>this.abreBarra()}>
<div class = "line1"></div>
<div class = "line2"></div>
<div class = "line3"></div>
</div>
<div class= "logo">
<h4>Crowdzero</h4>
</div>
</nav>
<div id="map"></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=my_api_key&callback=initMap&libraries=&v=weekly"
async
></script>
</body>
);
}
I have the CSS for the map to show up:
#map {
height: 400px;
width: 100%;
}
And I have the script for it to work:
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
}
I even created a solo project with just 3 files: html, css and js with that exact code and it works perfectly there, but when I code it here in the React app, it doesn't show up. Although it does show the div where it should be, like you can see in the image, but it doesn't display the map.
I also get these errors in my console, although I don't believe they are related to this problem:
1 answers
solution1
0 2021-06-10 19:49:27
After leaving some comments and reading your code some more:P.
Here's my recommendation:
Your main HTML, or cshtml, or whatever you're using to load your JS, should have:
<script src="https://maps.googleapis.com/maps/api/js?key=my_api_key&callback=initMap&libraries=&v=weekly" async></script> <script src="./mapa.js"></script> <script ="{the path for your main app}"></script>
And your component should be something like this:
.... render(){ return( <div> <nav> <ul class= "nav-links"> <li><a href="#"> <img class = "home_img" id = "1" src = {home} ></img> <div id="texto1"> <p>Home</p></div> </a></li> <li><a href="#"> <img class = "home_img" id = "2" src = {alertas}></img> <div id="texto2"><p>Alertas</p></div> </a></li> <li><a href="#"> <img class = "home_img" id = "3" src = {dashboards} ></img> <div id="texto3"><p>Dashboards</p></div></a></li> <li><a href="#"> <img class = "home_img" id = "4" src = {locais} ></img> <div id="texto4"> <p>Os seus locais</p></div> </a></li> <li><a href="#"> <img class = "home_img" id = "5" src = {ajuda} ></img> <div id="texto5"> <p>Ajuda</p></div> </a></li> </ul> <div class="burger" onClick={()=>this.abreBarra()}> <div class = "line1"></div> <div class = "line2"></div> <div class = "line3"></div> </div> <div class= "logo"> <h4>Crowdzero</h4> </div> </nav> <div id="map"></div> </div> ); }....
Also, make sure that the call to initialize the map happens AFTER you have rendered your component, otherwise, the map doesn't have anything to use. Maybe you can make that call on the same component you have, something like:
componentDidMount() { let map = new google.maps.Map(document.getElementById("map"), { center: { lat: -34.397, lng: 150.644 }, zoom: 8, }); }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.