Search code examples
cssgoogle-mapsionic-frameworkgoogle-places-apigoogle-places-autocomplete

Styles for google places autocomplete not working


I'm working on Angular 9 and Ionic 5 and I'm using google places autocomplete for an address input. The autocomplete works fine and thanks to this I managed to edit the styles on my browser. Then I went to my stylesheet (scss) to put these styles into their respective classes (pac-container, pac-item, pac-icon, etc) and the styles just won't show up as I specified on the scss file. If I check the browser, none of my styles were in the pac classes. My code goes as following:

profile.page.html

<ion-item class="br-5 mt">
   <ion-icon name="home" slot="start" class="ion-align-self-center" color="primary"></ion-icon>
   <ion-input id="googlePlaces" placeholder="Dirección" formControlName="address" required type="text"></ion-input>
</ion-item>

profile.page.scss

.pac-container{
    font-family: 'Open Sans';
}

.pac-item{
    margin-left:10px;
}

.pac-icon{
    display:none;
}

profile.page.ts

declare var google: any;
export class ProfilePage implements OnInit {
constructor(){}
ionViewDidEnter() {
    this.activeGooglePlace();
  }
activeGooglePlace() {

    let input = document.getElementById('googlePlaces').getElementsByTagName('input')[0];
    let autocomplete = new google.maps.places.Autocomplete(input, { types: ['geocode'] });
    autocomplete.setComponentRestrictions({ 'country': ['cl'] });
    google.maps.event.addListener(autocomplete, 'place_changed', () => {
      let place = autocomplete.getPlace();
      this.profileForm.controls.latitude.setValue(place.geometry.location.lat());
      this.profileForm.controls.longitude.setValue(place.geometry.location.lng());
      this.profileForm.controls.address.setValue(place.formatted_address);
    });
  } 
}

I even tried checking the apk on my phone as I read some people couldn't make it work on localhost. But still, didn't work. Any ideas on how to solve this? Thanks in advance.


Solution

  • I was able to change it by adding all those classes in my theme variables.scss. Really ashamed I wasn't able to check that one out at first.