angularjs - agm - google maps angular 6
Google Places Autocomplete no aparece (3)
He estado trabajando en esto durante horas tratando de averiguar por qué el autocompletar supuestamente simple no estaba apareciendo.
Resulta que en mi código, el elemento de entrada se establece en autocompete="off" , y el estilo en el contenedor de pac es de display: none .
Puedo cambiar estos valores en DevTools, y funciona bien, pero no puedo entender cómo o por qué se están configurando estos valores.
Mi autocompletado se configura en una directiva angular, como esta, donde loadGmaps obtiene la API de Google.
template: ''<input id="google_places_ac" name="google_places_ac" type="text" class="input-block-level"/>'', link: function($scope, elm, attrs){ loadGmaps().then(function(){ var autocomplete = new google.maps.places.Autocomplete($("#google_places_ac")[0], {}); console.log(autocomplete); google.maps.event.addListener(autocomplete, ''place_changed'', function() { var place = autocomplete.getPlace(); $scope.position = { lat: place.geometry.location.lat(), lon: place.geometry.location.lng() }; $scope.$apply(); }); });
---------------------Actualizar---------------------------- ------------------
Esperemos que nadie más se deje llevar por esto, el autocomplete="off" es un poco engañoso. Incluso con autocomplete="off" , el autocompletar todavía funciona, así que ese no fue el problema. Estoy sobreescribiendo el css del elemento .pac-container , que contiene los resultados con
.pac-container { //this is a fix for google autocomplete not showing up z-index: 10000 !important; display: block !important; }
El problema con esto es que una vez que se ha seleccionado un elemento del autocompletar, el autocompletar permanece visible, estoy bastante seguro de que hay una mejor manera de usar el autocompletar.
Hay otro caso en el que .pac-container no se mostrará: cuando usas contenedores de posición fija y dejas el <body> sin hijos relativos / estáticos reales, <body> colapsa a 0 altura o es tan pequeño que el borde inferior es más alto que donde aparecería el .pac-container . En tal caso, puede ver con los dispositivos de control que pac-container está en la posición correcta y tiene altura, pero no es visible.
body{min-height:calc(100vh)} podría ayudar.
Para cualquier otra persona que pueda estar atascada o que tenga dificultades con esto, ignore el valor ''autocomplete = "no", y no use'' display: block ''para mostrar el'' .pac-container ''.
Entra en tus devtools de Chrome y asegúrate de que puedas ver el .pac-container div. establece el índice z de ese div en tu css. Cuando hay un valor buscado, Google cambiará la visualización para bloquear y manejar la visualización y la ocultación, solo debes preocuparte por el índice z.
verifique la versión del mapa en el archivo de índice
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.26&key=YOUR API KEY"></script>
Especifique v = 3.26 al cargar la API de Google Map