Google AutoComplete is not showing
See original GitHub issueHello, first of all, thanks for the library.
I’m trying to display the autocomplete, but it’s not showing, don’t know if it’s a bug or a support request.
I know it’s working because if I type some location and move with the arrows, the locations are selected in the input, but the “google style autocomplete” is not showing as it’s seen in the demo.
I see in the source in chrome dev tools that there is this pac-container that is the autocomplete that’s not showing, but can’t figure out how to put it under the input.

I’ve investigated the repo looking for some missing step, but couldn’t figure it out what’s happening, maybe I’m missing some import or to include some google library.
component.html
<div
class="autocomplete-container">
<mat-google-maps-autocomplete class="autocomplete-container" [addressLabelText]="config.addressLabelText"
[placeholderText]="config.placeholderText"
[requiredErrorText]="config.requiredErrorText"
[invalidErrorText]="config.invalidErrorText"
[country]="config.country"
[appearance]="config.appearance"
(onAutocompleteSelected)="onAutocompleteSelected($event)"
(onLocationSelected)="onLocationSelected($event)">
</mat-google-maps-autocomplete>
</div>
<ng-container *ngIf="infoMapa">
<agm-map #mapa
[zoom]="infoMapa.zoom? infoMapa.zoom : 8"
[latitude]="mapPosition.lat"
[disableDoubleClickZoom]="true"
[longitude]="mapPosition.lng"
(zoomChange)="onZoomChange($event)"
[fitBounds]="false"
[disableDefaultUI]="true"
(mapClick)="addMarker($event)">
<ng-container *ngIf="infoMapa.latitud && infoMapa.longitud">
<agm-marker [latitude]="infoMapa.latitud" [longitude]="infoMapa.longitud"></agm-marker>
</ng-container>
</agm-map>
</ng-container>
component.ts
....
config = {
addressLabelText: 'Dirección/Lugar',
placeholderText: 'Ingrese una dirección',
requiredErrorText: 'Campo Requerido',
invalidErrorText: 'Error invalid text',
country: 'UY',
appearance: 'outline'
}
....
component.scss
agm-map {
height: 400px;
}
.autocomplete-container {
padding: 1rem 0 1rem 0;
display: flex;
justify-content: center;
width: 100%;
}
module.ts
....
imports: [
....
AgmCoreModule.forRoot({
apiKey: environment.googleMapsKey
}),
MatGoogleMapsAutocompleteModule.forRoot(),
],
I’ll apreciate any guidance in this, if it’s something it happend to anyone before.
Thanks!
Issue Analytics
- State:
- Created 5 years ago
- Comments:12 (5 by maintainers)
if anyone every sees this again on Google, I had this problem. The angular modal messes up where the .pac-container is displayed when you do the google auto complete. If you scroll have way down the page, then click your modal the .pac-container can off screen or be in the wrong position. I added a
::ng-deep .pac-container { position: fixed !important;}
and it fixed it. Since it was absolute by default by google.Ok I see! That means that has not a directly relation issue to the library! For the moment I will close the issue… if you have any further info about that pls consider to reopen #70
thank you