Unable to get Address Autocomplete powered by google working #7036

5 Answer(s)

• 

  0

  aaron created 5 years ago

  Support Team

  The error message is pretty straightforward. Implement getEstablishmentAddress.

  Save Cancel
• 

  0

  abrewer created 5 years ago

  I have implemented this within the modal edit component's TS, but i am still not getting the desired behavior. I am not getting the AutoComplete dropdown window to appear as soon as you begin typing.

  import { Component, ViewChild, Injector, Output, EventEmitter, NgZone} from '@angular/core';
  import { ModalDirective } from 'ngx-bootstrap';
  import { finalize } from 'rxjs/operators';
  import { LocationsServiceProxy, CreateOrEditLocationDto } from '@shared/service-proxies/service-proxies';
  import { AppComponentBase } from '@shared/common/app-component-base';
  import * as moment from 'moment';
  import { LocationGroupLookupTableModalComponent } from './locationGroup-lookup-table-modal.component';
  
  @Component({
      selector: 'createOrEditLocationModal',
      templateUrl: './create-or-edit-location-modal.component.html'
  })
  
  export class CreateOrEditLocationModalComponent extends AppComponentBase {
  
      @ViewChild('createOrEditModal') modal: ModalDirective;
      @ViewChild('locationGroupLookupTableModal') locationGroupLookupTableModal: LocationGroupLookupTableModalComponent;
  
  
      @Output() modalSave: EventEmitter<any> = new EventEmitter<any>();
  
      active = false;
      saving = false;
  
      location: CreateOrEditLocationDto = new CreateOrEditLocationDto();
  
      locationGroupName = '';
  
      address: Object;
      establishmentAddress: Object;
  
      formattedAddress: string;
      formattedEstablishmentAddress: string;
  
      phone: string;
  
      constructor(injector: Injector, private _locationsServiceProxy: LocationsServiceProxy, public zone: NgZone) {
          super(injector);
      }
  
      show(locationId?: number): void {
  
          if (!locationId) {
              this.location = new CreateOrEditLocationDto();
              this.location.id = locationId;
              this.locationGroupName = '';
  
              this.active = true;
              this.modal.show();
          } else {
              this._locationsServiceProxy.getLocationForEdit(locationId).subscribe(result => {
                  this.location = result.location;
  
                  this.locationGroupName = result.locationGroupName;
  
                  this.active = true;
                  this.modal.show();
              });
          }
      }
  
      save(): void {
              this.saving = true;
  
  
              this._locationsServiceProxy.createOrEdit(this.location)
               .pipe(finalize(() => { this.saving = false;}))
               .subscribe(() => {
                  this.notify.info(this.l('SavedSuccessfully'));
                  this.close();
                  this.modalSave.emit(null);
               });
      }
  
          openSelectLocationGroupModal() {
          this.locationGroupLookupTableModal.id = this.location.locationGroupId;
          this.locationGroupLookupTableModal.displayName = this.locationGroupName;
          this.locationGroupLookupTableModal.show();
      }
  
  
          setLocationGroupIdNull() {
          this.location.locationGroupId = null;
          this.locationGroupName = '';
      }
  
  
          getNewLocationGroupId() {
          this.location.locationGroupId = this.locationGroupLookupTableModal.id;
          this.locationGroupName = this.locationGroupLookupTableModal.displayName;
      }
  
  
      close(): void {
  
          this.active = false;
          this.modal.hide();
      }
  
      getAddress(place: object) {
          this.address = place['formatted_address'];
          this.phone = this.getPhone(place);
          this.formattedAddress = place['formatted_address'];
          this.zone.run(() => this.formattedAddress = place['formatted_address']);
      }
  
      getEstablishmentAddress(place: object) {
          this.establishmentAddress = place['formatted_address'];
          this.phone = this.getPhone(place);
          this.formattedEstablishmentAddress = place['formatted_address'];
          this.zone.run(() => {
              this.formattedEstablishmentAddress = place['formatted_address'];
              this.phone = place['formatted_phone_number'];
          });
      }
  
      getAddrComponent(place, componentTemplate) {
          let result;
  
          for (let i = 0; i < place.address_components.length; i++) {
              const addressType = place.address_components[i].types[0];
              if (componentTemplate[addressType]) {
                  result = place.address_components[i][componentTemplate[addressType]];
                  return result;
              }
          }
          return;
      }
  
      getStreetNumber(place) {
          const COMPONENT_TEMPLATE = { street_number: 'short_name' },
              streetNumber = this.getAddrComponent(place, COMPONENT_TEMPLATE);
          return streetNumber;
      }
  
      getStreet(place) {
          const COMPONENT_TEMPLATE = { route: 'long_name' },
              street = this.getAddrComponent(place, COMPONENT_TEMPLATE);
          return street;
      }
  
      getCity(place) {
          const COMPONENT_TEMPLATE = { locality: 'long_name' },
              city = this.getAddrComponent(place, COMPONENT_TEMPLATE);
          return city;
      }
  
      getState(place) {
          const COMPONENT_TEMPLATE = { administrative_area_level_1: 'short_name' },
              state = this.getAddrComponent(place, COMPONENT_TEMPLATE);
          return state;
      }
  
      getDistrict(place) {
          const COMPONENT_TEMPLATE = { administrative_area_level_2: 'short_name' },
              state = this.getAddrComponent(place, COMPONENT_TEMPLATE);
          return state;
      }
  
      getCountryShort(place) {
          const COMPONENT_TEMPLATE = { country: 'short_name' },
              countryShort = this.getAddrComponent(place, COMPONENT_TEMPLATE);
          return countryShort;
      }
  
      getCountry(place) {
          const COMPONENT_TEMPLATE = { country: 'long_name' },
              country = this.getAddrComponent(place, COMPONENT_TEMPLATE);
          return country;
      }
  
      getPostCode(place) {
          const COMPONENT_TEMPLATE = { postal_code: 'long_name' },
              postCode = this.getAddrComponent(place, COMPONENT_TEMPLATE);
          return postCode;
      }
  
      getPhone(place) {
          const COMPONENT_TEMPLATE = { formatted_phone_number: 'formatted_phone_number' },
              phone = this.getAddrComponent(place, COMPONENT_TEMPLATE);
          return phone;
      }
  }
  

  Save Cancel
• 

  0

  abrewer created 5 years ago

  Here is an example of what I am trying to achieve, and I am not getting the dropdown to appear upon my inital typing.

  

  FYI, here is the code that I am adapting to my project. https://medium.com/@dhormale/use-google-places-api-autocomplete-using-angular-for-resident-and-office-address-23cc33078e8

  Save Cancel
• 

  0

  ismcagdas created 5 years ago

  Support Team

  Hi @abrewer

  Does that work for you if you do it in a raw Angular project ?

  Save Cancel
• 

  0

  abrewer created 5 years ago

  Thanks for the reply, but I found the problem!

  I was using my autoComplete component within a modal, and the autoComplete dropdown panel need to be "raised" higher than the modal.

  Simply adding

  .pac-container {
      z-index: 10000 !important;
  }
  

  to my CSS caused this to work.

  Save Cancel