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:

I see a couple of errors on your console. I wonder if those would give you a better idea of what's going on. Could you post an image of your console errors/warnings? — LeoSanchez
– LeoSanchez, Commented Jun 8, 2021 at 19:47
First error is just a syntax problem, but I doubt that would be the culprit. In any case, you would need to fix that since react components have to have className instead of class. The second one seems more likely to be the problem. I didn't realize you had a body tag in your component. Your component is already being rendered inside the body of the document, so this might be messing up your selector when initializing the map. And one last thing, I would suggest to move the .mapa.js outside of the component as well, and place in at the end of the main page. — LeoSanchez
– LeoSanchez, Commented Jun 8, 2021 at 21:12
Ok so i just fixed everything you said except one thing: when I remove the <body> tag I get errors all over the html code. Image: media.discordapp.net/attachments/656598463638798357/… — Enguias
– Enguias, Commented Jun 10, 2021 at 17:22
So, 2 things, I would move your other Script tabs outside as well, I realized you have 2 more. And lastly, the reason it's giving you errors, I believe, it's because it is not encapsulated in anything. Usually, you will need to have your component wrapped into "something" usually just a div. So, I would take the scripts out and wrap the rest in a div. — LeoSanchez
– LeoSanchez, Commented Jun 10, 2021 at 19:36

LeoSanchez · Accepted Answer · 2021-06-10 19:58:51Z

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,
  });

}

Collectives™ on Stack Overflow

Google Maps JavaScript API not displaying in my React app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related