Окно поиска Карт Google Maps не работает

Question

Я слежу за Google Maps API Places search box example, чтобы создать карту с полем поиска.

Как карта, так и окно поиска отображаются просто отлично.

Проблема в том, что ввод текста в поле поиска ничего не делает. Нет выпадающего меню, автозаполнения и нажатия клавиши ввода не инициируют поиск.

Я что-то пропустил?

HTML:

<script src='//maps.google.com/maps/api/js?v=3.13&amp;sensor=false&amp;libraries=geometr‌​y,places' type='text/javascript'></script> 

<input id='pac-input' class='controls' type='text' placeholder='Search'> 

<div id='map_search' style='width: 100%; height: 30rem;'> 

JavaScript:

<script type='text/javascript'> 
    var mapstyle = [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"transit.station","elementType":"labels.icon","stylers":[{"visibility":"on"},{"hue":"#2185d0"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]} 
    ]; 

    function initialize() { 
    var peckham = new google.maps.LatLng(51.4714, -0.0625); 

    // Map search 
    var map = new google.maps.Map(document.getElementById('map_search'), { 
     center: peckham, 
     zoom: 14, 
     styles: mapstyle, 
     scrollwheel: false 
    }); 

    // Create the search box and link it to the UI element. 
    var input = document.getElementById('pac-input'); 
    var searchBox = new google.maps.places.SearchBox(input); 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

    // Bias the SearchBox results towards current map's viewport. 
    map.addListener('bounds_changed', function() { 
     searchBox.setBounds(map.getBounds()); 
    }); 

    var markers = []; 

    var infowindow = new google.maps.InfoWindow(); 
    var service = new google.maps.places.PlacesService(map); 

    // Listen for the event fired when the user selects a prediction and retrieve 
    // more details for that place. 
    searchBox.addListener('places_changed', function() { 
     var places = searchBox.getPlaces(); 

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

     // 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(); 
     places.forEach(function(place) { 
     var icon = { 
      url: place.icon, 
      size: new google.maps.Size(71, 71), 
      origin: new google.maps.Point(0, 0), 
      anchor: new google.maps.Point(17, 34), 
      scaledSize: new google.maps.Size(25, 25) 
     }; 

     // Create a marker for each place. 
     markers.push(new google.maps.Marker({ 
      map: map, 
      icon: icon, 
      title: place.name, 
      position: place.geometry.location 
     })); 

     // Show infowindow 
     google.maps.event.addListener(marker, 'click', function(evt) { 
      service.getDetails({ 
      placeId: this.placeId 
      }, (function(marker) { 
      return function(place, status) { 
       if (status === google.maps.places.PlacesServiceStatus.OK) { 
       infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + 
        'Place ID: ' + place.place_id + '<br>' + 
        place.formatted_address + '</div>'); 
       infowindow.open(map, marker); 
       } 
      } 
      }(marker))); 
     }); 

     if (place.geometry.viewport) { 
      // Only geocodes have viewport. 
      bounds.union(place.geometry.viewport); 
     } else { 
      bounds.extend(place.geometry.location); 
     } 
     }); 
     map.fitBounds(bounds); 
    }); 
    } 
</script> 

Answer 1

Найдено вопрос.

Был функция автозаполнения в другом месте, что было причиной конфликта:

<script type='text/javascript'> 
    function initialize() { 
    var input = document.getElementById('search_address'); 

    var autocomplete = new google.maps.places.Autocomplete(input); 
    } 

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

<script type='text/javascript'> 
    function initialize() { 
    var input = document.getElementById('listing_address'); 

    var autocomplete = new google.maps.places.Autocomplete(input); 
    } 

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