同一页面上有两个不同的 Google API，但出现 You has include the Google Maps API multiple times on this page 错误

Question

我尝试在同一页面上包含两个不同的 Google API，但收到错误

您已在此页面上多次包含 Google Maps API。

具体来说，我正在尝试使用 Google 的自动完成和距离矩阵 API。我只能在任何一个页面上使用其中一个，因为我不能调用

maps.googleapis.com

两次。但是，我必须调用链接的不同扩展名（即

callback=initAutocomplete

和

callback=initMap

），所以我不知道如何解决这个问题。两个链接如下：

<script src="https://maps.googleapis.com/maps/api/js?key=MyPrivateKey=&libraries=places&callback=initAutocomplete" async defer></script>

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

有谁知道如何通过单个脚本调用访问自动完成和地图 API？ 谢谢！

Answer 1

通常，当 Google 地图（如果需要，则加载所有库）完全加载并可以使用时，会调用

callback

函数。因此，您可以将

initAutoComplete

放入

initMap

中，就像

<script>
   var map;
   function initMap(){
      // initiate a new map instance. 
      map = new google.maps.Map(document.getElementById('map'), {
          zoom: 12,
          center: {lat: 15.3647, lng: 75.1240}
      });
      initAutocomplete(); // initiate Auto complete instance 
   }
   function initAutocomplete(){
         // code to handle autocomplete
   }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=<key>&libraries=places&callback=initMap" async defer></script>

Answer 2

使用焦点函数并替换mapinit函数中的输入值

   function country() {
            mapInp = document.getElementById("country");
            initMap(mapInp)`enter code here`;
        }
        //   feedback form city search
        function city() {
            mapInp = document.getElementById("showcity");
            initMap(mapInp);
        };
      
    //   main map called in both city and country
        function initMap(mapInp) {
          var country;
          
            const map = new google.maps.Map(document.getElementById("map3"), {
              center: { lat: -33.8688, lng: 151.2195 },
              zoom: 13,
            });
            
    
             const input = mapInp;
            //  var autocomplete = new google.maps.places.Autocomplete(input, options);
            const card = document.getElementById("pac-card");
            // Zconst input = document.getElementById("showcity");
            map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
            const autocomplete = new google.maps.places.Autocomplete(input);
            // Bind the map's bounds (viewport) property to the autocomplete object,
            // so that the autocomplete requests use the current map bounds for the
            // bounds option in the request.
            autocomplete.bindTo("bounds", map);
            // Set the data fields to return when the user selects a place.
            autocomplete.setFields([
              "address_components",
              "geometry",
              "icon",
              "name",
            ]);
            const infowindow = new google.maps.InfoWindow();
            const infowindowContent = document.getElementById("infowindow-content");
            infowindow.setContent(infowindowContent);
            const marker = new google.maps.Marker({
              map,
              anchorPoint: new google.maps.Point(0, -29),
            });
            autocomplete.addListener("place_changed", () => {
              infowindow.close();
              marker.setVisible(false);
              const place = autocomplete.getPlace();
              if (!place.geometry) {
                // User entered the name of a Place that was not suggested and
                // pressed the Enter key, or the Place Details request failed.
                window.alert(
                  "No details available for input: '" + place.name + "'"
                );
                return;
              }
              // If the place has a geometry, then present it on a map.
              if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
              } else {
                map.setCenter(place.geometry.location);
                map.setZoom(17); // Why 17? Because it looks good.
              }
              marker.setPosition(place.geometry.location);
              marker.setVisible(true);
        
      }