0

I've been trying to embed a Google Map on my page via React. In my index.html html, I the followng scipr tag in between my tag

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap" async defer></script>

I need to create the initMap callback function. I want this callback function to be inside my Map component.

1) How would I connect this callback such that the maps API knows where to find it?

2) To actually create the map, I do it through the google object.

var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      scrollwheel: false,
      zoom: 8
    });

However, my React component won't compile because it's complaining that the 'google' object doesn't exist -- meaning it's not being exposed to me as it should. Of course when I go to the console, I can access it. It seems like the component either doesn't have access to it (although it should since the objects from script tags become global, right?) or its accessing it before the library is loaded (which I don't know how to fix even though it says "defer" in the script tag).

Any help would be appreciated. My problem is similar to this, but the accepted answer did not work for me.

I also tried this tutorial to no avail...I'm not sure if I'm missing something.

Community
  • 1
  • 1
user1596241
  • 31
  • 4

1 Answers1

0

Quick Example

If u want ignore the error, try add global variable in your eslint config

"globals": { "google": true }

In my example, I remove the callback argument in script tag, I did it in my component.

Hope this can help.

Lin Shih Hao
  • 341
  • 1
  • 3
  • 10