Google places searchable using JQuery

Question

I am using Google Places for my location text box and its working fine. But I need to make it class based implimentation so I can use it with any other places multiple time. I don't know this class based is possible or not is there any way to do with JQuery?

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxx&libraries=places"></script> 
<script src="assets/js/jquery.searchable-1.0.0.min.js"></script> 

<script>
 // scripts.js custom js file
 $(document).ready(function () {
  google.maps.event.addDomListener(window, 'load', initialize);
 });

 function initialize() {
    var input = document.getElementById('location');
    var input2 = document.getElementById('location2');
    var autocomplete = new google.maps.places.Autocomplete(input);
    var autocomplete = new google.maps.places.Autocomplete(input2);
 }
</script>

This might be helpful: [How to getElementByClass instead of GetElementById with JavaScript?](https://stackoverflow.com/questions/1933602/how-to-getelementbyclass-instead-of-getelementbyid-with-javascript) — showdev, Aug 27 '18 at 18:35
I tried with this not working "var input = getElementsByClassName(document, location);" — Middlerange, Aug 27 '18 at 18:43
Please include a [working example](https://stackoverflow.com/help/mcve) to help demonstrate your code and the problem. — showdev, Aug 27 '18 at 19:01

score 0 · Answer 1 · answered Aug 27 '18 at 18:47

This can be done like this

$(document).ready(function () {
  google.maps.event.addDomListener(window, 'load', initialize);
  map = new google.maps.Map($("#location").get(0), startMapOptions);
});
function initialize() {
 var input = document.getElementsByClassName("location")[0];
 var autocomplete = new google.maps.places.Autocomplete(input);

}

score 0 · Answer 2 · answered Aug 27 '18 at 19:10

I don't know if I fully understand you, but I've created a jsfiddle demo for you. You are free to modify it to your needs. Basically, you can use querySelector to query for anything without using jQuery:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxx&libraries=places"></script> 
<script src="https://rawgit.com/stidges/jquery-searchable/master/dist/jquery.searchable-1.0.0.min.js"></script> 

<input class="location" type="text" />
<br />
<input class="location2" type="text" />

<script>
 // scripts.js custom js file
 $(document).ready(function () {
  google.maps.event.addDomListener(window, 'load', initialize);
 });

 function initialize() {
    var input = document.querySelector('.location');
    var input2 = document.querySelector('.location2');
    var autocomplete = new google.maps.places.Autocomplete(input);
    var autocomplete = new google.maps.places.Autocomplete(input2);
 }
</script>

Can't we use only one location for two text filed like input address1 and address2 ? — Middlerange, Aug 27 '18 at 20:22
I don't understand you. What's the problem? Had you take a look into the demo? IF you want to have one class for all fields then just give every input one class — lomboboo, Aug 28 '18 at 06:12

Google places searchable using JQuery

2 Answers2