jquery geocomplete和markerclusterer在一个JSAPI中包括

我有以下代码：

<form action="suche/" method="get"> 
<input autocomplete="false" name="hidden" type="text" style="display:none;">
<input type="hidden" id="lng"  value="" name="lng">
<input type="hidden" id="lat"  value="" name="lat">
<input type="text" id="city" name="city" autocomplete="off" class="form-control header  city" placeholder="Wo suchst du?" required>
<button class="btn btn-primary btn-block header" type="submit">Suchen</button>
</form>

<div id="map" style="width:100%;height:400px"></div>

<script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 12,
  center: {
  lat: 52.545157,
  lng: 11.083294900000055
 }
});
var infoWin = new google.maps.InfoWindow();
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
  position: location
});
google.maps.event.addListener(marker, 'click', function(evt) {
  infoWin.setContent(location.info);
  infoWin.open(map, marker);
})
return marker;
});

var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
var locations = [{
lat: 52.5504,
lng: 11.08523,
info: 'xxx'
}];

google.maps.event.addDomListener(window, 'load', initMap);
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=[MYKEY]&amp;libraries=places"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=[MYKEY]&amp;&callback=initMap"></script> 
<script type="text/javascript" src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

<script src="jquery.geocomplete.js"></script>
<script>
    $(".city").geocomplete({
      details: "form",
      //types: ["geocode"],
      language: 'de-DE',
    types: ['geocode'],
      componentRestrictions: {country: "de"}
    });

    $("#find").click(function(){
      $(".city").trigger("geocode");
    });   

</script>

苏晨
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：12，
中心：{
拉脱维亚：52.545157，
液化天然气：11.083294900000055
}
});
var infoWin=new google.maps.InfoWindow（）；
var markers=locations.map（函数（位置，i）{
var marker=new google.maps.marker({
位置：位置
});
google.maps.event.addListener（标记，'click'，函数（evt）{
infoWin.setContent（location.info）；
打开（地图、标记）；
})
返回标记；
});
var markerCluster=新的MarkerClusterer（地图、标记、{
imagePath:'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
变量位置=[{
拉脱维亚：52.5504，
液化天然气：11.08523，
信息：“xxx”
}];
google.maps.event.addDomListener（窗口'load'，initMap）；
$（“.city”）.geocomplete({
详情：“表格”，
//类型：[“地理编码”]，
语言：'de de'，
类型：['geocode']，
组件限制：{国家：}
});
$（“#查找”）。单击（函数（）{
$（“.city”）.trigger（“地理代码”）；
});   

问题：控制台输出：您已多次在此页面上包含Google Maps JavaScript API。这可能会导致意外错误

---

有人知道如何从GoogleMapsAPI中只包含一个js库吗

我在表格中使用autocomplete（地理编码数据（lng、lat））

---

在另一个div中，我使用Markerclusterer，它不适用于自动完成（这是正确的）。

您应该能够使用任一选项（带

异步延迟和回调或不带回调）。最简单的解决方案是删除
async defer
和回调，但这意味着加载页面需要更长的时间

为此：


按照中的说明加载API：


苏晨
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：12，
中心：{
拉脱维亚：52.545157，
液化天然气：11.083294900000055
}
});
var infoWin=new google.maps.InfoWindow（）；
var markers=locations.map（函数（位置，i）{
var marker=new google.maps.marker({
位置：位置
});
google.maps.event.addListener（标记，'click'，函数（evt）{
infoWin.setContent（location.info）；
打开（地图、标记）；
})
返回标记；
});
var markerCluster=新的MarkerClusterer（地图、标记、{
imagePath:'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
变量位置=[{
拉脱维亚：52.5504，
液化天然气：11.08523，
信息：“xxx”
}];
google.maps.event.addDomListener（窗口'load'，initMap）；
$（“.city”）.geocomplete({
详情：“表格”，
//类型：[“地理编码”]，
语言：'de de'，
类型：['geocode']，
组件限制：{
国家：“德”
}
});
$（“#查找”）。单击（函数（）{
$（“.city”）.trigger（“地理代码”）；
});
“如何只包含一个js库”是指多个js库吗？这在（底部）中有描述，现在我有两个，我只想要一个include第一个include js code not func如果是asyn defer，第二个js include code not func如果async defer是off->callback
<script src="https://maps.googleapis.com/maps/api/js?key=[APIKEY]&libraries=places"></script>