Put google places pac-container inside div?

Question

I am using the google places autocomplete api and when I initialize the auto complete element autocomplete = new google.maps.places.Autocomplete($('#google_places_ac')[0], {}) it appends the .pac-container to the body.

I have a div that is scrollable that this content is in so what happens is the .pac-container is positioned absolute and when the div scrolls it does not scroll with it.

Is there any way I can get the .pac-container to be inserted inside of my div and not at the end of the body?

score 8 · Answer 1 · answered Apr 18 '17 at 14:00

It's not a perfect solution but it the best I could find

var addressInputElement = $('#yourInputElementId');
addressInputElement.on('focus', function () {
  var pacContainer = $('.pac-container');
  $(addressInputElement.parent()).append(pacContainer);
})

you might be needed to change some css as well

.pac-container {  
  z-index: 9999999 !important;  
  top: 32px !important;   //your input height
  left: 0 !important; 
}

score 0 · Answer 2 · answered Mar 19 '14 at 15:46

0

A work around would be to blur the input field on scrolling.

$('insert-scrolling-container').on('scroll', function() {
    $('#google_places_ac').blur();
});

answered Mar 19 '14 at 15:46

Pim

608
1
6
17

score 0 · Answer 3 · answered Oct 05 '17 at 13:16

You can put google places pac-container inside div check this solution

function initAutocomplete() {
      //....codes...
       //....add this code just before close function...
    setTimeout(function(){ 
                $(".pac-container").prependTo("#mapMoveHere");
            }, 300);
}

https://codepen.io/gmkhussain/pen/qPpryg

score 0 · Answer 4 · answered Jun 22 '18 at 11:31

Just came across this whilst trying to find a solution to the same problem.

I ended up doing it using the MooTools JavaScript framework.

Hope this helps anyone who comes across the same problem.

    // Start Address is the address form input field
    // Add a focus to delay this being run
    $('StartAddress').addEvent('focus', function()
    {
         // Make sure the new location of the .pac-container doesn't already contain it
         if($$('.route-form fieldset .pac-container').length == 0)
         {
              // Use adopt() to move the .pac-container to its new location
              // This method will keep all relations between the element and Google Maps
              $$('.route-form fieldset')[0].adopt($$('.pac-container'));
         }
    });

score 0 · Answer 5 · answered Jul 07 '19 at 13:12

It's not a perfect solution but it the best I could find

var addressInputElement = $('#yourInputElementId');
addressInputElement.on('focus', function () {
  var pacContainer = $('.pac-container');
  $(addressInputElement.parent()).append(pacContainer);
})

you might be needed to change some css as well

.pac-container {  
  z-index: 9999999 !important;  
  top: 32px !important;   //your input height
  left: 0 !important; 
}

get this comment from first i cant check useful but i will repeat it

Put google places pac-container inside div?

5 Answers5