Google地图搜索框无效

时间:2016-09-10 22:10:27

标签: jquery google-maps

我的谷歌地图上有一个搜索框,在输入时似乎没有显示任何自动填充结果。地图本身显示所以我相信我的api凭据是可以的。我似乎错过了什么,但无法弄清楚是什么!在搜索框中输入内容当前无效

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

function initializeMap() {

            var mapOptions = {
                center: { lat: 41.8369, lng: -87.6847 },
                disableDefaultUI: true, // a way to quickly hide all controls
                zoom: 8
            };
            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            var input = document.getElementById('pac-input');
            var searchBox = new google.maps.places.SearchBox(input);
            map.controls[google.maps.ControlPosition.TOP].push(input);

            map.addListener('bounds_changed', function () {
                searchBox.setBounds(map.getBounds());
            });

            var markers = [];
            searchBox.addListener('places_changed', function () {
                var places = searchBox.getPlaces();
                var place;

                if (places.length == 0) {
                    return;
                }

                else {
                    place = places[0];
                }

                var lat = place.geometry.location.lat();
                var lon = place.geometry.location.lng();

                
                // Clear out the old markers.
                markers.forEach(function (marker) {
                    marker.setMap(null);
                });
                markers = [];

                // For each place, get the icon, name and location.
                var bounds = new google.maps.LatLngBounds();


                var marker = new google.maps.Marker({
                    map: map,
                    title: place.name,
                    draggable: true,
                    position: place.geometry.location
                });

                


                markers.push(marker);

                if (place.geometry.viewport) {
                    // Only geocodes have viewport.
                    bounds.union(place.geometry.viewport);
                } else {
                    bounds.extend(place.geometry.location);
                }


                map.fitBounds(bounds);
            });

        }

1 个答案:

答案 0 :(得分:1)

您需要为密钥启用Places API。