title: How can I use google maps API and places library?
body: <p>I am trying to use the google maps API to load a map and autocomplete a form. However when I try and initialise I can't do it. </p>
  
  <p>I can do this:</p>
  
  <pre><code>&lt;script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&amp;callback=initMap"&gt;
      &lt;/script&gt;
  </code></pre>
  
  <p>And the map works. Places API doesn't. I tried adding &amp;libraries=... to the end but that didn't work. If I add:</p>
  
  <pre><code> &lt;script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&amp;libraries=geometry"&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>This is my whole page:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
    &lt;link rel="stylesheet "type="text/css" href="control_panel.css"&gt;
      &lt;style type="text/css"&gt;
        html, body { height: 100%; margin: 0; padding: 0; }
        #map { height: 100%; }
      &lt;/style&gt;
      &lt;script type="text/javascript"
           src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDqSTkzPn8PpJBY3Pclu-TTjmGDLzqKMD4&amp;libraries=places&amp;callback=initMap"&gt;
      &lt;/script&gt;
  
  
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="headerBar"&gt;
          &lt;ul class="item"&gt;Opening Page&lt;/ul&gt;
          &lt;ul class="item"&gt;Make a booking&lt;/ul&gt;
          &lt;ul class="item"&gt;Heat Map&lt;/ul&gt;
          &lt;ul class="item"&gt;Blah&lt;/ul&gt;
          &lt;ul class="item"&gt;Blah&lt;/ul&gt;
  
      &lt;/div&gt;
      &lt;div&gt;
       &lt;div id="locationField"&gt;
            &lt;input id="autocomplete" placeholder="Enter your address"
                   onFocus="geolocate()" type="text"&gt;&lt;/input&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="map"&gt;
      &lt;script type="text/javascript"&gt;
          var map;
          function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
              center: {lat: -34.397, lng: 150.644},
              zoom: 8
            });
          }
      &lt;/script&gt;
      &lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
          // Bias the autocomplete object to the user's geographical location,   // [START region_geolocation]
          // as supplied by the browser's 'navigator.geolocation' object.
          function geolocate() {
            if (navigator.geolocation) {
              navigator.geolocation.getCurrentPosition(function(position) {
                var geolocation = {
                  lat: position.coords.latitude,
                  lng: position.coords.longitude
                };
                var circle = new google.maps.Circle({
                  center: geolocation,
                  radius: position.coords.accuracy
                });
                autocomplete.setBounds(circle.getBounds());
              });
            }
          }
  
          // [END region_geolocation]
  
          function initAutocomplete() {
            // Create the autocomplete object, restricting the search to geographical
            // location types.
            autocomplete = new google.maps.places.Autocomplete(
                /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
                {types: ['geocode']});
  
            // When the user selects an address from the dropdown, populate the address
            // fields in the form.
            autocomplete.addListener('place_changed', fillInAddress);
          }
          function fillInAddress() {
            // Get the place details from the autocomplete object.
            var place = autocomplete.getPlace();
          }
  
  
      &lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
      &lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>However the autocomplete form doesn't work</p>