Google Places API无法加载

珍妮·D4RK

我有一段代码昨天晚上与地方图书馆一起工作,可以很好地处理Google地图的自动完成功能,但是今天早上,我完全无法使其工作。

我收到以下错误:

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>

Google是否有可能为我的引荐来源禁用了该API?
难道我做错了什么 ?

用户名

尝试设置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>

我遇到了类似的问题,即自动填充功能今天早上停止工作,没有任何变化。我跟踪到此更改,然后它再次起作用。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

实施Google Places API

来自分类Dev

Google Places API替代

来自分类Dev

Google Places API的使用

来自分类Dev

Google Places APi照片

来自分类Dev

Google Places 活动 API

来自分类Dev

InputStreamReader无法连接到Google Places API

来自分类Dev

Google Places API Android resultCallback无法启动

来自分类Dev

无法添加Google Places API密钥

来自分类Dev

从Google Places API获取数据

来自分类Dev

Google places autocomplete api limits

来自分类Dev

MarkLogic Google Places API查询

来自分类Dev

超出 Google Places API 配额

来自分类Dev

无法加载搜索结果 Google Places ios Swift

来自分类Dev

使用Google Places附近搜索API无法获得与Google Places API完全匹配的信息

来自分类Dev

Google Places API与Google Geocode API

来自分类Dev

使用Google Places API的Google评论总数

来自分类Dev

使用Google Places API获取google +评论

来自分类Dev

结合Google Places API和Facebook Places API

来自分类Dev

Google Places API:了解Places自动完成响应的解析

来自分类Dev

从 Android 中的 Google Places 加载图片

来自分类Dev

无法使用生成的密钥访问Google Places API

来自分类Dev

Google Places API期间[]未显示

来自分类Dev

Android使用PlaceAutoCompleteActivity(Google Places API)

来自分类Dev

Google Places Api按距离排序

来自分类Dev

Google Places API的结果列表为空

来自分类Dev

仅从Google Places API获取社区

来自分类Dev

通过API注册新地点Google Places

来自分类Dev

Google Places和Foursquare iOS API

来自分类Dev

使用Google Places API的最近商店功能