title: Google Map API call happening before http get request can be made in Angular 5
body: <p>I'm trying to use URL parameters to do a GET request, and then use JSON output to power a query into Google Maps. So far, I've figured out how to make the embedded map work by being sanitized, and passing in static data. However, doing the call for the query finishes after the URL gets built, thus getting 'undefined' as the result.</p>
  
  <pre><code>@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 = `&amp;q=${this.lat},${this.lng}`;
    apiLink = `https://www.google.com/maps/embed/v1/place?key=`;
     // `&amp;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 = `&amp;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) =&gt; {
          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);
        });
    }
  }
  </code></pre>
  
  <p>And the HTML code for what I'm trying:</p>
  
  <pre><code>&lt;/div&gt;
      &lt;iframe
        width="600"
        height="450"
        frameborder="0"
        style="border:0"
        [src]="urlSafe"&gt;
      &lt;/iframe&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I'm very fresh to Web Dev, so any and all help would be appreciated. Thank You.</p>