css - places - Google Maps se autocompleta, corrige la entrada

ionic google maps places

Question

Estoy intentando agregar una entrada de autocompletar de Google Maps a mi aplicación iónica. Funciona bastante bien, excepto cuando me desplazo. Como se muestra en la imagen:

Posición error cuando scroll

Así que probé cosas diferentes, como cambiar la posición de .pac-container, pero no resuelve el problema. Cuando inspecciono la página, parece que el contenedor de resultados se carga al final de la página, por lo que no es fácil hacer que el bloque se adhiera a la barra de entrada.

Ya busqué en todas partes y no encontré ninguna solución adecuada? ¿Alguien tiene una idea de cómo hacerlo? (En realidad es solo un código simple como este:

    function initialize() {
            var options = {componentRestrictions: {country: ''uk''}, types: [''geocode'']}
        new google.maps.places.Autocomplete(
        (document.getElementById(''autocomplete'')), options);
    }

    initialize();

jsfiddle

Gracias de antemano, Robin Fourcade.

Answer 1

Ahora pude reproducir el problema, la solución es simplemente agregar position: relative a su box contenedor y position: absolute a su entrada #autocomplete .

Obtuve la solución comprobando el ejemplo proporcionado por el equipo de Google.

He actualizado tu violín para que coincida con la solución, pero es así:

Su CSS actualizado:

.box {
  position: relative;
  height: 200vh;
}

#autocomplete {
    width:350px;
    position: absolute;
}

Answer 2

Tengo el mismo problema. Mi solución fue:

$(''#inputContainer'').scroll(function(){
    //Set new top to autocomplete dropdown
    newTop = $(''#autocompleteInput'').offset().top + $(''#autocompleteInput'').outerHeight();
    $(''.pac-container'').css(''top'', newTop + ''px'');
  }
});

Esto actualiza la posición desplegable cuando el contenedor se desplaza.

Answer 3

Acabo de encontrar el mismo problema cuando estaba implementando el Autocompletar en un formulario dentro de un modal desplazable. Si solo tiene un objeto Autocompletar, la solución es relativamente fácil.

1. Primero asegúrese de que el elemento primario de su elemento tenga una posición relativa.

2. Luego debe seleccionar el contenedor .pac y anexarlo al padre.

   $("#autocomplete").parent()
       .css({position: "relative"})
       .append(".pac-container");

3. Finalmente configure la posición superior y posterior del contenedor .pac para que esté debajo de su elemento. Esto debe hacerse en una hoja de estilo con la declaración ! Important para garantizar que anula los estilos en línea establecidos por el código de Google.

   // these values will need to be calculated based on your layout
   .pac-container {
       top: 40px !important;
       left: 0px !important;
   }

Obviamente, esto no funcionará si tiene múltiples objetos Autocompletar en una sola página. Afortunadamente, descubrí una forma de manejar ese escenario y recientemente lo publiqué en un plugin de jQuery diseñado para hacer que las formas de autocompletar direcciones sean pan comido.

Answer 4

Tengo la solución, compruebe el ejemplo no hay problema con error de posición cuando se desplaza

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

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