Issue
I am using google maps api in angular.
The first and second options of autocomplete cannot be chosen by pressing the "enter" key.
It can be chosen by arrows but the choice isn't displayed in the page. It is shown as empty.
I have tried changing to newPackage.paOriginPlaceId instead of origin which is returned from the cookie but it doesn't help either.
Can anyone point me to a possible solution?
Code pasted below:
html
<div class="box4 sb13"> {{origin}} </div>
ts
@Component({
selector: 'app-order-delivery',
templateUrl: './order-delivery.component.html',
styleUrls: ['./order-delivery.component.css']
})
export class OrderDeliveryComponent implements OnInit, AfterViewChecked {
@ViewChild('scrollMe', { static: false }) public myScrollContainer: ElementRef;
@ViewChild('target', { static: false }) target: ElementRef;
@ViewChild('searchModalTarget', { static: false }) searchModalTarget: ElementRef
@ViewChild('search', { static: false }) public searchElement: ElementRef;
@ViewChild('places', { static: false }) places: GooglePlaceDirective;
@Output() address: EventEmitter<string> = new EventEmitter<string>();
userCode: string;
public origin: string;
public destination: string;
weekday: number[] = [1, 2, 3, 4, 5, 6];
lat: string;
handleOriginChange(a: Address) {
this.getAddress(a.place_id).subscribe(
res => {
this.stringPlace = JSON.parse(res).results[0].formatted_address
this.origin = this.stringPlace;
this.newPackage.paOriginPlaceId = this.origin;
}, err => {
alert("There were wrong details");
});
if (!(a.geometry.location.lng() == 0 || a.geometry.location.lat() == 0)) {
this.newPackage.paOriginX = a.geometry.location.lat();
this.newPackage.paOriginY = a.geometry.location.lng();
}
}
newPackage: Package = new Package();
public appearance = Appearance;
public zoom: number;
public latitude: number;
public longitude: number;
public searchObj: SearchResponse;
public searchResultsObj;
public searchResultsArr;
public searchInput: boolean = true;
public stringPlace: string;
public listquestionChat: Array<number>;
public i: number = 0;
durationInSeconds = 5;
displayedColumns: string[] = ['Origin', 'Destination', 'Minutes of walk'];
ELEMENT_DATA = this.searchResultsArr;
constructor(private renderer: Renderer, private modalService: NgbModal, private router: Router, private loggedU: LoginCredentialsService, private packageService: PackageSendService, private HTTP: HttpClient, private _snackBar: MatSnackBar) { }
closeResult = '';
onLocationOriginSelected(location: Location) {
this.newPackage.paOriginX = location.latitude;
this.newPackage.paOriginY = location.longitude;
}
keyDownFunction(event) {
sessionStorage.setItem("index", this.i.toString());
switch (this.i) {
case 2: sessionStorage.setItem("paOrigin", this.newPackage.paOriginPlaceId);
sessionStorage.setItem("paOriginX", this.newPackage.paOriginX.toString())
sessionStorage.setItem("paOriginY", this.newPackage.paOriginY.toString())
break;
case 3: sessionStorage.setItem("paDestination", this.newPackage.paDestinationPlaceId);
}
}
scrollToBottom(): void {
try {
this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
} catch (err) { }
}
ngAfterViewChecked() {
this.scrollToBottom();
}
getAddress(place_id: string) {
return this.HTTP.get("https://maps.googleapis.com/maps/api/geocode/json?place_id=" + place_id + "&language=en&key=YOUR_API_KEY", { responseType: 'text' });
}
ngOnInit() {
this.scrollToBottom();
this.newPackage.paOriginPlaceId = sessionStorage.getItem("paOrigin");
this.newPackage.paOriginX = parseFloat(sessionStorage.getItem("paOriginX"));
this.newPackage.paOriginY = parseFloat(sessionStorage.getItem("paOriginY"));
this.origin = sessionStorage.getItem("paOrigin");
Solution
you need to change in style:
::ng-deep.pac-container{
z-index: 6000 !important;
position: relative !important;
margin-top: -1440px !important;
}
margin-top: -1440px !important; As needed
Answered By - user12360120
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.