title: Uncaught TypeError: Cannot read property 'SearchBox' of undefined
body: <p>I'm running a code for google map which can display public schools or private schools with different markers each, when I run the code, it has an error on this line:  </p>
  
  <pre><code>var searchBox = new google.maps.places.SearchBox(input);
  </code></pre>
  
  <p>The error is:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'SearchBox' of undefined</p>
  </blockquote>
  
  <p>What is the problem with my code?</p>
  
  <pre><code>  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Places Search Box&lt;/title&gt;
  &lt;style&gt;
  /* Always set the map height explicitly to define the size of the div
         * element that contains the map. */
  #map {
    height: 100%;
  }
  
  
  /* Optional: Makes the sample page fill the window. */
  
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  #description {
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
  }
  
  #infowindow-content .title {
    font-weight: bold;
  }
  
  #infowindow-content {
    display: none;
  }
  
  #map #infowindow-content {
    display: inline;
  }
  
  .pac-card {
    margin: 10px 10px 0 0;
    border-radius: 2px 0 0 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    background-color: #fff;
    font-family: Roboto;
  }
  
  #pac-container {
    padding-bottom: 12px;
    margin-right: 12px;
  }
  
  .pac-controls {
    display: inline-block;
    padding: 5px 11px;
  }
  
  .pac-controls label {
    font-family: Roboto;
    font-size: 13px;
    font-weight: 300;
  }
  
  #pac-input {
    background-color: #fff;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    margin-left: 12px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 400px;
  }
  
  #pac-input:focus {
    border-color: #4d90fe;
  }
  
  #title {
    color: #fff;
    background-color: #4d90fe;
    font-size: 25px;
    font-weight: 500;
    padding: 6px 12px;
  }
  
  #target {
    width: 345px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
    &lt;body&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&amp;libraries=places.js"&gt;&lt;/script&gt;
  &lt;input id="pac-input" class="controls" type="text" placeholder="Search Box"&gt;
  &lt;div id="map"&gt;&lt;/div&gt;
  &lt;script&gt;
  function initAutocomplete() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: -33.8688,
        lng: 151.2195
      },
      zoom: 13,
      mapTypeId: 'roadmap'
    });
  
    // 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 = [];
    // 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) {
        if (!place.geometry) {
          console.log("Returned place contains no geometry");
          return;
        }
  
        var icons = {
          'Public school': {
            icon: 'http://i68.tinypic.com/xcnnz4.png'
          },
          'Private school': {
            icon: 'http://i67.tinypic.com/2utkz8k.png'
          }
        };
  
        // Create a marker for each place.
        markers.push(new google.maps.Marker({
          map: map,
          icon: icon,
          title: place.name,
          position: place.geometry.location
        }));
  
        if (place.geometry.viewport) {
          // Only geocodes have viewport.
          bounds.union(place.geometry.viewport);
        } else {
          bounds.extend(place.geometry.location);
        }
      });
      map.fitBounds(bounds);
    });
  }
  
  initAutocomplete();
  &lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>