I recently followed the guide provided in this discussion with success. The method outlined worked perfectly for loading search boxes using this component:
map.component.html
<input id= 'box2' *ngIf="boxReady" class="controls" type="text" placeholder="Search Box">
<input id = 'box' class="controls" type="text" placeholder="Search Box">
map.component.ts
import {Component, Input, OnInit} from '@angular/core';
import {GoogleAPIService} from '../google-api.service';
declare var google: any;
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.scss'],
})
export class MapComponent implements OnInit {
@Input() boxIdVar: string;
// @Input() id: string;
boxReady = false;
constructor(private _google: GoogleAPIService){}
ngOnInit(): void {
if (typeof google !== 'undefined') {
console.log(google);
console.log('Map.NgInit');
console.log(this.boxIdVar);
this.boxReady = true;
let input = document.getElementById('box');
let originSearch = new google.maps.places.SearchBox(input);
input = document.getElementById('box2');
let dest = new google.maps.places.SearchBox(input);
}
else {
console.log('Google was undefined Map');
}
}
}
However, I encountered an issue when attempting to use an *NgIf statement to load one of the boxes only when the component is rendered. This resulted in that particular searchbox failing to function and generating an uncaught promise exception.
map.component.html
<input id= 'box2' *ngIf="boxReady" class="controls" type="text" placeholder="Search Box">
<input id = 'box' class="controls" type="text" placeholder="Search Box">
An error message was displayed in the console:
ERROR Error: "Uncaught (in promise): TypeError: b is null
v$.prototype.o@https://maps.googleapis.com/maps-api-v3/api/js/40/5/places_impl.js:78:66
The root cause of this issue stemmed from my attempt to dynamically alter the Id of the input box. It appears that whenever an HTML element is bound to an Angular variable, the functionality is disrupted.