6

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.

Orkun
  • 6,998
  • 8
  • 56
  • 103
  • i am facing the same problem. have you solved it? – zeroflaw Oct 12 '18 at 10:24
  • i have. But i donT really remember how. :( It might have sth to do with the 'withScripts()' though. Do you use it or not? Taking that out might have solved my issue. https://github.com/tomchentw/react-google-maps/issues/812 – Orkun Oct 13 '18 at 14:50
  • Thanks for your info. i discover this solution: https://stackoverflow.com/questions/51442761/you-have-included-the-google-maps-javascript-api-multiple-times-on-this-page-th so far haven't seen any problem yet. will let you know if i hit wall ... – zeroflaw Oct 15 '18 at 06:48

1 Answers1

0

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

Oscar Mata
  • 1