如何动态切换谷歌地图地址

最近遇到一个需要，就是谷歌地图的地址需要购买谷歌地图后收到填入，这样导致的问题是，谷歌地图会可能会被频繁的替换，出现一些不可预见的错误。

问题

当我们引用谷歌服务地址如：https://maps.googleapis.com/maps/api/js?key=unique_code&language=zh-CN 在页面加载该js时，会自动加载出多个与google地图相关的js代码，最终将全局对象google.Maps挂载到window对象上。这样当我们切换地址，会出现如下问题：
1）只是将script标签src的属性替换，就会造成依赖的加载依然是旧的，而且新的js也会加载大量的js文件，造成冲突；再者之前加载到内存里面的多个对象并没有被回收，造成对象重复冲突等不可预期问题。

2）动态替换js，因为script一般是异步加载的，而当前业务建立在地图上，会出现地图js没有加载完，而先执行了基于google API的代码，造成错误

解决办法

思路：将所有与google项目的node删除掉，检测js是否加载完成，加载完成执行业务方法的回调

/**
 * 动态添加外部js，js加载完成，执行回调
 * @param url       script的src的地址
 * @param callback  回调函数执行
 * @param srckey    要替换的src包含的字段 这里加载的是谷歌地图maps.googleapis.com'
 */
export function changeScript({url,srckey,callback}){
  // 删除之前的script
  const scripts = document.querySelectorAll('script');
  for(const script of scripts){
    if(script.src.includes(srckey)){
      script.parentNode.removeChild(script);
    }
  }
  document.execCommand('Refresh');

  // 重新创建script
  const script = document.createElement("script");
  script.type = "text/javascript";
  script.async = true;
  script.defer = true;
  if (script.readyState) { // IE
    script.onreadystatechange = function () {
      if (script.readyState === "loaded" || script.readyState === "complete") {
        script.onreadystatechange = null;
        callback();
      }
    };
  } else { // Others
    script.onload = function () {
      callback();
    };
  }
  script.src = url;
  document.getElementsByTagName("head")[0].appendChild(script);
}