Forum Academy Marketplace Showcase Pricing Features

Little help with HTML/JavaScript

I have very limited knowledge of HTML/JavaScript and have only just successfully managed to implement the Google Place Autocomplete Searchbox (without map) on my app.

I need two inputs that use the Google Place Autocomplete, but the following code that I am using, does not show the two input fields, just the second one (searchTextField2).

Can anyone please offer some advice, or point me in the right direction where I am going wrong with this code?

Any help would be very much appreciated.

#searchTextField { position: absolute; box-sizing: border-box; z-index: 4; height: 40px; width: 360px; left: 0px; top: 0px; border: 1px solid rgb(189, 189, 189); background-color: rgb(255, 255, 255); border-radius: 3px; font-family: Roboto; font-size: 18px; font-weight: 500; color: rgb(85, 85, 85); padding: 0px 4px; transition: border-color 200ms ease, box-shadow 200ms ease; box-shadow: none; } #searchTextField2 { position: absolute; box-sizing: border-box; z-index: 4; height: 40px; width: 360px; left: 0px; top: 0px; border: 1px solid rgb(189, 189, 189); background-color: rgb(255, 255, 255); border-radius: 3px; font-family: Roboto; font-size: 18px; font-weight: 500; color: rgb(85, 85, 85); padding: 0px 4px; transition: border-color 200ms ease, box-shadow 200ms ease; box-shadow: none; }
 </head>

 <body>
 <input id="searchTextField" type="text" size="50" placeholder="Pick-up Address" tabindex=2><br>
 <input id="searchTextField2" type="text" size="50" placeholder="Destination" tabindex=3>


 <script type="text/javascript">
 function initMap() {
var input = document.getElementById('searchTextField');
var input2 = document.getElementById('searchTextField2');
var options = {
   // types: ['(cities)'],
   componentRestrictions: {country: 'uk'}//UK
};
var autocomplete = new google.maps.places.Autocomplete(input,options);
var autocomplete2 = new google.maps.places.Autocomplete(input2,options);
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&libraries=places&callback=initMap" async defer></script>

</body>
</html>

CANCEL - or please delete post.

Just realised when I read over my post there, both inputs are shown left: 0px top: 0px - hiding the first input! :sob: