Adding Multiple Instances of Google Places on Same Page

google-places, google-places-api, javascript

Solution

It is simply problem. You using two IDs "autocomplete" and "autocomplete2" but initialized only ID "autocomplete". Try add this code to initialize().

Javascript

autocomplete2 = new google.maps.places.Autocomplete(document.getElementById('autocomplete2'), { types: [ 'geocode' ] });
google.maps.event.addListener(autocomplete2, 'place_changed', function() {
  fillInAddress();
});

Problem

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. 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. 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. Any help is greatly appreciated! ``` <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script> <script type="text/javascript"> 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 < 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; } } } </script> ``` HTML ``` <body onload="initialize()"> <form action="" method="post" name="theform" id="theform"> <label>Pickup Location</label> <input type="text" name="PickupLocation" onfocus="geolocate()" placeholder="Enter your pickup location" id="autocomplete" autocomplete="off" /> <label>Dropoff Location</label> <input type="text" name="DropoffLocation" onfocus="geolocate()" placeholder="Enter your dropoff location" id="autocomplete2" autocomplete="off" /> </form> </body> ```

Original source