Using MapQuest on Angular2 Application

2 posts / 0 new
Last post
Using MapQuest on Angular2 Application

I am trying to use MapQuest on Angular 2.

The problem that I have is that when the page is first loaded , I get the following error :  'Cannot set property 'key' of undefined    at '

When I refresh the page, everything works.

My Code is as follows :


<!doctype html>

<html lang="en">


<meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>RAMO - Angular 4 Admin Template</title>

    <meta name="description" content="Admin template based on Angular 4 and Bootstrap 4">

<base href="/"> 

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="icon" type="image/x-icon" href="favicon.ico">

<script src=""></script>

<link type="text/css" rel="stylesheet" href=""/>






<script data-pace-options='{ "target": ".main-wrapper", "ghostTime": 1000 }'></script>







import { Component } from '@angular/core';


declare var L : any;


selector: 'ram-mapa-quest',

template: `

<div class="row googlemap mbm-20">

<div class="col-12">

<div widget class="card">

<div class="card-header">



<div class="card-block widget-body">

<div id="mapQ" style="height:100%" ></div>






styleUrls: ['./mapa-quest.component.scss']


export class MapaQuestComponent implements OnInit {

private map: any;

constructor() { }

ngOnInit() {

L.mapquest.key = 'WtWsIgg6HOewtSl2xxxxxxxxxxx'; ='map', {

center: [37.7749, -122.4194],

layers: L.mapquest.tileLayer('map'),

zoom: 12




Make sure the MapQuest sdk is
Make sure the MapQuest sdk is finished loading before using any objects within it. It sounds like the sdk has not loaded before setting the key value.