Google Maps V3 - 覆盖 API KEY

Question

I'm loading Google Maps using the default script tag like the following

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

Is there a way to override this API_KEY after the page is loaded ? Or even create another instance of google maps without affecting the original instance?

This is needed for AB testing to avoid it from affecting the original API_KEY that is using throughout the website.

Iframe approach is probably not possible because it is needed to append several markers in the map.

Thanks.

Answer 1

If someone else has the same problem, first it is needed to reset the current instance of maps

google.maps = undefined;

Then you can just include your own script

var scriptNode = document.createElement('script');
scriptNode.src = GOOGLE_MAPS_URL_WITH_NEW_KEY;
document.head.append(scriptNode);

It works this way.

Note: If you have any other dependencies such as Infobox, you might need to add those again

Answer 2

您可以像这样（jQuery）添加编辑您的 src 属性：

$("script").attr("src", YOUR_URL_HERE_WITH_AN_API_KEY_CHANGE);