title: Adding Multiple Instances of Google Places on Same Page
body: <p>I'm looking to include 2 instances of Google Places auto-complete on the same page. Looking to setup an input for a Pickup Location and an input for a Dropoff Location.</p>
  
  <p>I'm assuming it has to do with the ID of the input element, but even when I changed it to a class, it still wasn't working.</p>
  
  <p>This is what I currently have, and it works for the first field, but I can't figure out how to get a second input field to auto complete, or even show any signs of being anything other than a plain input text field.</p>
  
  <p>Any help is greatly appreciated!</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;libraries=places"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    var placeSearch,autocomplete;
    function initialize() {
      autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), { types: [ 'geocode' ] });
      google.maps.event.addListener(autocomplete, 'place_changed', function() {
        fillInAddress();
      });
    }
    function fillInAddress() {
      var place = autocomplete.getPlace();
  
      for (var component in component_form) {
        document.getElementById(component).value = "";
        document.getElementById(component).disabled = false;
      }
  
      for (var j = 0; j &lt; place.address_components.length; j++) {
        var att = place.address_components[j].types[0];
        if (component_form[att]) {
          var val = place.address_components[j][component_form[att]];
          document.getElementById(att).value = val;
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body onload="initialize()"&gt;
  &lt;form action="" method="post" name="theform" id="theform"&gt;
      &lt;label&gt;Pickup Location&lt;/label&gt;
      &lt;input type="text" name="PickupLocation" onfocus="geolocate()" placeholder="Enter your pickup location" id="autocomplete" autocomplete="off" /&gt;
  
      &lt;label&gt;Dropoff Location&lt;/label&gt;
      &lt;input type="text" name="DropoffLocation" onfocus="geolocate()" placeholder="Enter your dropoff location" id="autocomplete2" autocomplete="off" /&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>