I'm attempting to display a Google Map using the place_id extracted from an HTML value.
activity-details.page.html
<ion-col>
<div id="map"></div>
<div *ngIf="activities">
<input type="hidden" id="place_id" value="{{ activities.place_id }}" />
</div>
</ion-col>
</ion-row>
This snippet represents the code displayed in the browser.
<input _ngcontent-irr-c150="" type="hidden" id="place_id" value="ChIJ21P2rgUrTI8Ris1fYjy3Ms4">
I'm striving to configure the map options as the final step after all the code is loaded.
activity-details.page.ts
ngAfterViewInit() {
this.geocodePlaceId(
this.geocoder = new google.maps.Geocoder(),
this.map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 8,
}
),
this.infowindow = new google.maps.InfoWindow());
}
The problem arises when I try to retrieve the place_id value from the HTML in this last function.
activity-details.page.ts
geocodePlaceId(
geocoder: google.maps.Geocoder,
map: google.maps.Map,
infowindow: google.maps.InfoWindow
) {
const placeId = (document.getElementById("place_id") as HTMLInputElement).value;
geocoder.geocode({ placeId: placeId }, (results, status) => {
...//the remaining map setup options
}
I keep encountering the ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'value' of null TypeError: Cannot read property 'value' of null
What could be the issue with my implementation?