Fixing “You have included the Google Maps API mult

问题:

I've included two below scripts in my header and I get the error "You have included the Google Maps API multiple times on this page. This may cause unexpected errors."

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js key=************"></script>

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

When I remove either script, I get additional js errors. How can I properly refactor these two scripts in my rails app?

回答1:

In your example above, you're including the same script twice, but with different parameters. You should be able to solve your issue by including the script once, with all the required parameters like this:

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

回答2:

If you're calling google maps via an ajax call, you can use window.google = {} upon exiting the state in which the map was called.

回答3:

I know that in my case it's not a Rails app but might help to someone else ... I'm working with React and I was getting the same error when I was switching between views/pages.

And like wLc said window.google = {} worked like a charm and was deleting the error in the console but the <script> tag was remaining in the html and was added every time I was revisiting the page that has the map.

On componentWillUnmount I've added some code to remove the tag.

const allScripts = document.getElementsByTagName( 'script' );
[].filter.call(
  allScripts, 
  ( scpt ) => scpt.src.indexOf( 'key=googleAPIKEY' ) >= 0
 )[ 0 ].remove();

 window.google = {};