I am experimenting with URL parameters to make a GET request and then use JSON output to drive a query in Google Maps. Currently, I have managed to make the embedded map function by sanitizing it and passing static data. However, when making the query call, it stops after building the URL, resulting in 'undefined' as the outcome.
@Component({
selector: 'app-contactdetail',
templateUrl: './contactdetail.component.html',
styleUrls: ['./contactdetail.component.css']
})
export class ContactdetailComponent implements OnInit {
contactId: string;
contactDetail: Object = { };
lat: string;
lng: string;
queryBuilder = `&q=${this.lat},${this.lng}`;
apiLink = `https://www.google.com/maps/embed/v1/place?key=`;
// `&q=321+Fake+Street,Mouton+ME`
apiKey = `lol`;
builtLink = `${this.apiLink}${this.apiKey}${this.queryBuilder}`;
url: string = this.builtLink;
urlSafe: SafeResourceUrl =
this.sanitizer.bypassSecurityTrustResourceUrl(this.url);;
constructor(private route: ActivatedRoute,
private http: Http,
private sanitizer: DomSanitizer
) {}
ngOnInit() {
this.contactId = this.route.snapshot.params.id;
this.getContactDetail(this.contactId);
console.log(this.urlSafe);
console.log(this.builtLink);
}
// TODO: make this pass in an option eventually.
/* buildQuery(){
const address = `&q=${this.contactDetail.address.split('
').join('+')},`;
const city = ``
} */
async buildURL(url) {
const sanitized =
this.sanitizer.bypassSecurityTrustResourceUrl(url);
return sanitized;
}
async getContactDetail(contactId) {
return this.http
.request(`http://localhost:3000/contacts/${contactId}`)
.subscribe((res: any) => {
this.contactDetail = res.json();
if (this.contactDetail.hasOwnProperty('geoLocation_lat')) {
this.lat = this.contactDetail['geoLocation_lat'];
console.log(this.lat);
}
if (this.contactDetail.hasOwnProperty('geoLocation_lng')) {
this.lng = this.contactDetail['geoLocation_lng'];
console.log(this.lng);
}
console.log(this.contactDetail);
});
}
}
And here is the HTML code that I am trying:
</div>
<iframe
width="600"
height="450"
frameborder="0"
style="border:0"
[src]="urlSafe">
</iframe>
</div>
As a beginner in Web Development, any help or guidance would be greatly appreciated. Thank you.