How do I add a link to the dropdown menu provided by google places api (autocomplete)?

655 views Asked by At

I'm creating an app where users can post events going on in the area.

I have an input field that uses google places autocomplete.

      <!---- EVENT LOCATION ---->      
      <div class="form-group">
        <label for="location">Event Location</label>
        <input name="location" type="text" class="form-control" id="location" placeholder="Hogwarts School, 127 Long Island">
      </div>
      <script>
          var ac = new google.maps.places.Autocomplete(document.getElementById('location'));
          ac.addListener('place_changed', function() {
              var place = ac.getPlace();
          });
      </script>

This works just fine (see image)

just fine, but I want to add a functionality that Eventbrite has. Look at what they have here .

At the end of their dropdown menu, they have a link saying "can't find your location?"

I'd like to have that. Any idea on how to add a link to the bottom of the dropdown menu?

1

There are 1 answers

0
Asool On BEST ANSWER

Alright I figured it out. Will change it later to stick to either jquery or javascript. If you know a better way of doing this, please let me know

      <!---- EVENT LOCATION ---->      
      <div class="form-group">
        <label for="location">Event Location</label>
        <input name="location" type="text" class="form-control" id="location" placeholder="Hogwarts School, 127 Long Island">
      </div>
      <script>
          var ac = new google.maps.places.Autocomplete(document.getElementById('location'));
          ac.addListener('place_changed', function() {
              var place = ac.getPlace();
              console.log(place.formatted_address);
              console.log(place.url);

          });
          $('#location').on('click', function() {

                var picklist = document.getElementsByClassName('pac-container')[0];
                var link = picklist.getElementsByTagName('a');
                console.log(link.length);
                if(link.length == 0) {
                    var aTag = document.createElement('a');
                    aTag.setAttribute('href',"http://www.google.com");
                    aTag.innerHTML = "Can't find address?";
                    picklist.appendChild(aTag);
                }

          });

      </script>