Javascript 使用GoogleMapsAPI在Web应用程序中创建多个服务

我使用：

maps.googleapis.com

创建了一个搜索框

并继续使用此服务创建显示位置的地图

我的问题是：如果函数

搜索框

运行，则创建

地图的函数

将失败

我添加了标题：

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

这里是搜索位置的我的代码：

function initMap() {
    var input = document.getElementById('diadiem_baogia');
    var autocomplete = new google.maps.places.Autocomplete(input);
    var infowindow = new google.maps.InfoWindow();

    autocomplete.addListener('place_changed', function() {
        infowindow.close();
        var place = autocomplete.getPlace();
        if (!place.geometry) {
            window.alert("Autocomplete's returned place contains no geometry");
            return;
        }

        var address = '';
        if (place.address_components) {
            address = [
              (place.address_components[0] && place.address_components[0].short_name || ''),
              (place.address_components[1] && place.address_components[1].short_name || ''),
              (place.address_components[2] && place.address_components[2].short_name || '')
            ].join(' ');
        }

        infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
    });
}

函数initMap（）{
var input=document.getElementById（'diadiem_baogia'）；
var autocomplete=new google.maps.places.autocomplete（输入）；
var infowindow=new google.maps.infowindow（）；
autocomplete.addListener（'place\u changed'，function（）{
infowindow.close（）；
var place=autocomplete.getPlace（）；
如果（！place.geometry）{
警告（“自动完成的返回位置不包含几何体”）；
返回；
}
var地址=“”；
if（位置、地址和组件）{
地址=[
（place.address_components[0]&&place.address_components[0]。简称| | |“”），
（place.address_components[1]&&place.address_components[1]。简称| | |“”），
（place.address_components[2]&&place.address_components[2]。简称| |“”）
].加入（“”）；
}
infowindow.setContent（“”+place.name+”
“+地址）；
});
}

我尝试使用以下代码添加地图：

<script>
  var toadox = "<?php echo $config[0]->ip_map_x; ?>";
  var toadoy = "<?php echo $config[0]->ip_map_y; ?>";
  var title = "<?php echo $config[0]->website; ?>";
  var myCenter=new google.maps.LatLng(toadox, toadoy);

  function initialize()
  {
    var mapProp = {
      center:myCenter,
      zoom:18,
      scrollwheel: false,
      mapTypeId:google.maps.MapTypeId.ROADMAP
    };

    var map=new google.maps.Map(document.getElementById("contactgoogleMap_main"),mapProp);
    var marker=new google.maps.Marker({
      position:myCenter,
    });
    marker.setMap(map);
    infowindow.open(map,marker);
  }

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

var toadox=“”；
var toadoy=“”；
var title=“”；
var myCenter=newgoogle.maps.LatLng（toadox，toadoy）；
函数初始化（）
{
var mapProp={
中心：迈森特，
缩放：18，
滚轮：错误，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“contactgoogleMap_main”），mapProp）；
var marker=new google.maps.marker({
职位：迈森特，
});
marker.setMap（map）；
信息窗口。打开（地图、标记）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

该错误出现在控制台中，如下所示：

未捕获类型错误：无法读取未定义的属性“LatLng”

在这一行：

google.maps.LatLng（toadox，toadoy）

GEThttps://csi.gstatic.com/csi?v=2&s=mapsapi3&v3v=26.10&action=apiboot2&libraries=places&e=10_1_0，10_2_0&rt=main.49 net:：ERR_被客户端阻止

似乎无法使用此API创建贴图，我不知道如何解决此问题。

检查以下事项： -谷歌地图API启用了吗？ -在设置lat lng之前是否包含脚本？ -脚本加载成功吗

---

从脚本src中删除回调参数。像这样使用它：

在我问这个问题和脚本加载成功之前，我已经启用了。我没有看到你的例子。