Google Maps API twice error due to two modules

user_494659 0
Viewed 1079

I am using react-google-maps along with location-autocomplete in a react app.

On page load, I receive the infamous:

"You have included the Google Maps API multiple times on this page. This may cause unexpected errors."

To repeat, I am using maps via modules and not by directly including <script> tags. What is the best way to overcome such cases?

I have found this issue on github which seems to be the same case, with different libraries but they get too deep into the specifics of their library ('leaflet'). I wonder if there is a more generic solution.

react-google-maps npm google-maps-api-3 module javascript
1 Answers

You can add the Script:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={{ YOUR CODE }}&libraries=places&sensor=false"></script>

To the head in the public > index.html file

and from the file where you are running the <GoogleMap> component remove the <LoadScript> wrapper because if the parent component refreshes it might cause a double instance of the Maps script

user_109144150
Related