搜索框Google Maps API无法显示自动完成

Question

我正在为位置搜索创建地图，但我的搜索框不显示自动完成功能。我按照 https://www.youtube.com/watch 上的教程进行操作?v=D_jUFC-Xktk&t=3s

这是我的地图，未显示自动完成

index.blade.php

<script async src="https://maps.googleapis.com/maps/api/js?key=keysensor&libraries=places"></script>
<div class="row">
   <div class="col-lg-12">
     <style>
     #map {
        width: 100%;
        height: 500px;
     }
    </style>
    <label for=""><b>ADRESSTANAH <font style="color: red;">*</font></b></label>
    <div class="form-group">
       <input type="text" id="searchmap">
       <div id="map"></div>
    </div>
</div>

var map = new google.maps.Map(document.getElementById('map'),{
    center:{
        lat:-6.8909965,
        lng:110.6046387
    },
    zoom:15
});

var marker = new google.maps.Marker({
    position: {
        lat:-6.8909965,
        lng:110.6046387
    },
    map : map,
    draggable : true
});

var searchBox = new google.maps.places.SearchBox(document.getElementById('searchmap'));

google.maps.event.addListener(searchBox, 'places_changed', function(){

    var places = searchBox.getPlaces();
    var bounds = new google.maps.LatLngBounds();
    var i, place;

    for(i=0; place=places[i];i++){
        bounds.extends(place.geometry.location);
        marker.setPosition(place.geometry.location);
    }

    map.fitBounds(bounds);
    map.setZoom(15);
});

google.maps.event.addListener(marker, 'position_changed', function(){
    var lat = marker.getPosition().lat();
    var lng = marker.getPosition().lng();

    $('#lat').val(lat);
    $('#lng').val(lng);
});

我想在搜索框中显示自动完成功能。请帮我解决它。感谢你。

Answer 1

您需要在请求中有一个回调参数，该参数将调用要执行的需要。例如：

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

然后，您将将所有JavaScript代码放在initmap函数中。这是一个有效的jsbin样本： https：/ ？HTML，JS，控制台，输出