CODEWITHSUNDEEP
javascriptreactjsgoogle-mapsgoogle-apijsx
Enguias
Enguias

Reputation: 73

Google Maps JavaScript API not displaying in my React app

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.

Image that shows the div spot but no map

I also get these errors in my console, although I don't believe they are related to this problem:

enter image description here

Upvotes: 0

Views: 594

Answers (1)

LeoSanchez
LeoSanchez

Reputation: 169

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

}

Upvotes: 2

Related Questions