同一页面上有两个不同的 Google API，但您在此页面上多次包含 Google Maps API 错误

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>

有谁知道如何通过单个脚本调用访问自动完成和 Map 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 
   }
   fucntion 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);
        
      }