Javascript 谷歌不加载API_Javascript_Google Maps

Javascript 谷歌不加载API

javascript google-maps

Javascript 谷歌不加载API,javascript,google-maps,Javascript,Google Maps,我有一段代码，昨天晚上在places库处理google maps autocomplete时工作得很好，但今天早上，我完全无法让它工作我得到以下错误： Cannot read property 'Autocomplete' of undefined 生成错误的行 var searchBox = new google.maps.places.Autocomplete($("#searchBox")[0], { types: ['(regions)'], componentRes

我有一段代码，昨天晚上在places库处理google maps autocomplete时工作得很好，但今天早上，我完全无法让它工作

我得到以下错误：

Cannot read property 'Autocomplete' of undefined

生成错误的行

var searchBox = new google.maps.places.Autocomplete($("#searchBox")[0], {
    types: ['(regions)'],
    componentRestrictions: {country: "fr"}
});

在脚本之前加载库

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0t5XuHRGcvsOoWNS3QJGJyxgkdoC_V5E&sensor=true"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>

完整代码：

<html>
<head>
    <meta charset="UTF-8">
    <title>ImmoGéo</title>
    <link rel="stylesheet" href="style.css" />
    <link href='http://fonts.googleapis.com/css?family=Carrois+Gothic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
</head>
<body>
    <div id="share" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                    <h4 class="modal-title">Partager</h4>
                </div>
                <div class="modal-body">
                    <input type="text" id="share-url" class="form-control"/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div id='panel'>
        <div id="title">RECHERCHE</div>
        <div id="content">
             <div id="search" class="input-group">
                <input type="text" autocomplete="off" id="searchBox" class="form-control" placeholder="Recherche"/><span style="cursor: pointer;" data-toggle="modal" data-target="#share" class="input-group-addon"><img src="img/share.png" height="20px"/></span>
            </div>
            <div class="btn-group btn-group-justified">
                <a class="btn btn-info" >ACHETER</a>
                <a class="btn btn-info" >LOUER</a>
            </div>
            <div id="criteria">

            </div>
        </div>

    </div>
    <div id='map-canvas'></div>
</body>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0t5XuHRGcvsOoWNS3QJGJyxgkdoC_V5E&sensor=true"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<script type='text/javascript'>

    function togglePanel()
    {
        if($("#panel").css("right") == "-400px"){
            $("#panel").animate({"right": "0px"}, 800, 'easeInOutQuart', function(){
                $("#searchBox").focus();
            });
        }
        else {
            $(".pac-container").hide();
            $("#panel").animate({"right": "-400px"}, 800, 'easeInOutQuart');
        }


    }

    function init()
    {
        //set title style
        $("#title").css("width", 3*(($(window).width())/100)); //width button 3%
        $("#title").css("left", "-"+3*(($(window).width())/100)+"px"); //left -3%

        $("#title").click(function(){
           togglePanel();
        });

        //add listeners on #actions

        //LOCATING USER
        userPosition = new Object();
        userPosition.latitude = 48.85;
        userPosition.longitude = 2.4;

        if (navigator.geolocation)
        {
            navigator.geolocation.watchPosition(
                function (pos){
                    if(userPosition.latitude != pos.coords.latitude || userPosition.longitude != pos.coords.longitude)
                    {
                        userPosition.latitude = pos.coords.latitude;
                        userPosition.longitude = pos.coords.longitude;
                        pos = new google.maps.LatLng(userPosition.latitude, userPosition.longitude);
                        map.panTo(pos);
                    }
                },
                null,
                {enableHighAccuracy:true}
            );            
        }
        else
            alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");

        //MAP OPTIONS
        map = new google.maps.Map(document.getElementById("map-canvas"),{
            center: new google.maps.LatLng(userPosition.latitude, userPosition.longitude),
            streetViewControl: false,
            zoom: 12,
            mapTypeControl: true
        });

        //SEARCHBOX
        var searchBox = new google.maps.places.Autocomplete($("#searchBox")[0], {
            types: ['(regions)'],
            componentRestrictions: {country: "fr"}
        });

        google.maps.event.addListener(searchBox, 'place_changed', function() {
            var place = searchBox.getPlace();
            if(typeof searchMarker !== 'undefined')
                searchMarker.setMap(null);

            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(13);  // Why 13? Because it looks good.
            }
            //create markers for each results
            searchMarker = new google.maps.Marker({
                map: map,
                title: place.name,
                position: place.geometry.location
            });
        });
    }

    $(document).load(init());

</script>


献祭
x
分享者
接近
里切切
艾切特
百叶窗
函数切换面板（）
{
如果（$（“#面板”）.css（“右”）=“-400px”）{
$（“#panel”）.animate（{“right”：“0px”}，800，'easeInOutQuart'，function（）{
$（“#搜索框”）.focus（）；
});
}
否则{
$（“.pac容器”）.hide（）；
$（“#panel”）.animate（{“right”：“-400px”}，800，“easeInOutQuart”）；
}
}
函数init（）
{
//设置标题样式
$（“#title”）.css（“宽度”，3*（$（window.width（））/100））；//宽度按钮3%
$（“#title”）.css（“左”、“-”+3*（（$（window.width（））/100）+“px”）；//左-3%
$（“#标题”）。单击（函数（）{
切换面板（）；
});
//在#操作上添加侦听器
//定位用户
userPosition=新对象（）；
userPosition.latitude=48.85；
userPosition.longitude=2.4；
if（导航器.地理位置）
{
navigator.geolocation.watchPosition(
功能（pos）{
if（userPosition.latitude！=pos.coords.latitude | | userPosition.longitude！=pos.coords.longitude）
{
userPosition.latitude=pos.coords.latitude；
userPosition.longitude=pos.coords.longitude；
pos=新的google.maps.LatLng（userPosition.latitude，userPosition.longitude）；
潘托地图（pos）；
}
},
无效的
{enableHighAccurance:true}
);            
}
其他的
警报（“Votre navigateur ne prend pas en compte la géolocalization HTML5”）；
//地图选项
map=new google.maps.map（document.getElementById（“地图画布”）{
中心：新的google.maps.LatLng（userPosition.latitude，userPosition.longitude），
街景控制：错误，
缩放：12，
mapTypeControl：true
});
//搜索框
var searchBox=new google.maps.places.Autocomplete（$（“#searchBox”）[0]{
类型：['（区域）]，
组件限制：{国家：“fr”}
});
google.maps.event.addListener（搜索框，'place_changed'，函数（）{
var place=searchBox.getPlace（）；
if（搜索标记的类型！==‘未定义’）
searchMarker.setMap（空）；
if（place.geometry.viewport）{
map.fitBounds（place.geometry.viewport）；
}否则{
地图。设置中心（地点。几何。位置）；
map.setZoom（13）；//为什么是13？因为它看起来不错。
}
//为每个结果创建标记
searchMarker=new google.maps.Marker({
地图：地图，
标题：place.name，
位置：place.geometry.location
});
});
}
$（document.load（init（））；

谷歌有没有可能为我的推荐人禁用API？

我做错什么了吗？

您正在加载两次Google API：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0t5XuHRGcvsOoWNS3QJGJyxgkdoC_V5E&libraries=places&sensor=true"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>

您必须将这两个链接合并为一个链接，如下所示：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0t5XuHRGcvsOoWNS3QJGJyxgkdoC_V5E&libraries=places&sensor=true"></script>

此外，一些其他链接在开始时缺少

http:

。检查控制台日志以查看错误消息。

尝试设置sensor=false，如：

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0t5XuHRGcvsOoWNS3QJGJyxgkdoC_V5E&libraries=places&sensor=false"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>

我有一个类似的问题，autocomplete今天早上停止工作，没有任何变化。我追踪到这一变化，它又起作用了

在不使用传感器参数的情况下使用

在其他地方找到了一个解决方案，建议在加载google places库时分离请求中的查询请参见下面的示例：

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

这对我使用科尔多瓦有效

link:

think libraries=places将只加载places方法。我的错。干得好，但是为什么它突然停止工作了？

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