title: Google Maps API Places search box not working
body: <p>I have been following the <a href="https://developers.google.com/maps/documentation/javascript/examples/places-searchbox" rel="nofollow" title="Places search box example">Google Maps API Places search box example</a> in order to create a map with a search box.</p>
  
  <p>Both the map and the search box appear just fine.</p>
  
  <p>The problem is that typing into the search box does nothing. No dropdown, no autocomplete, and pressing enter does not initiate a search.</p>
  
  <p>Have I missed something?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;script src='//maps.google.com/maps/api/js?v=3.13&amp;amp;sensor=false&amp;amp;libraries=geometr‌​y,places' type='text/javascript'&gt;&lt;/script&gt;
  
  &lt;input id='pac-input' class='controls' type='text' placeholder='Search'&gt;
  
  &lt;div id='map_search' style='width: 100%; height: 30rem;'&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
    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('&lt;div&gt;&lt;strong&gt;' + place.name + '&lt;/strong&gt;&lt;br&gt;' +
                    'Place ID: ' + place.place_id + '&lt;br&gt;' +
                    place.formatted_address + '&lt;/div&gt;');
                  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);
      });
    }
  &lt;/script&gt;
  </code></pre>