question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Google AutoComplete is not showing

See original GitHub issue

Hello, 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.

autocomplete

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.

Captura de pantalla 2019-03-12 a la(s) 22 15 07

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:closed
  • Created 5 years ago
  • Comments:12 (5 by maintainers)

github_iconTop GitHub Comments

8reactions
ErikHDevcommented, Nov 7, 2019

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.

1reaction
AnthonyNahascommented, May 4, 2019

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Google Places Autocomplete not showing up - Stack Overflow
go into your chrome devtools and make sure you can see the .pac-container div. set the z-index of that div in your css....
Read more >
Autocomplete is not working - Storemapper
You can do this by selecting “API's and Services” and selecting Credentials. From here, please select the pen to edit your key and...
Read more >
How to Fix Google Search Autocomplete Not Working in Chrome
How to Fix Google Search Autocomplete Not Working in Chrome · 1. Restart Chrome · 2. Enable Autocomplete · 3. Turn Sync Off...
Read more >
Place Autocomplete | Maps JavaScript API - Google Developers
If the API is not listed, enable it: At the top of the page, select ENABLE API to display the Library tab. Alternatively,...
Read more >
Google Places Autocomplete Not Working on Pages
I'm trying to implement Google Places autocomplete for an address field. I included the script at the bottom of the index.html file, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found