How to use google maps along with pub nub in angular

I am trying to implement the tracking system in my application using pub nub, I have created the google map using Javascript by changing the configurations in the Angular.Json file, I am calling an external javascript file.

I am not able to display the map in my angular application, but when I use the same code in normal HTML it is working, but when I added the same code in my angular application map is not displaying.


   <div class="container">
    <h1>PubNub Google Maps - Live Device Location</h1>
    <div id="map" style="width:100%;height:600px"></div>

 = 28.7041;
         window.lng = 77.1025;

        function getLocation() {
            if (navigator.geolocation) {

       return null;

      function updatePosition(position) {
       if (position) { = position.coords.latitude;
        window.lng = position.coords.longitude;

      setInterval(function(){updatePosition(getLocation());}, 20000);

     function currentLocation() {
        return {, lng:window.lng};

    var map;
    var mark;
    var lineCoords = [];
    var initialize = function() {
    var icon = {
       url: "assests/images/download.png", // url
       scaledSize: new google.maps.Size(30, 30), // scaled size
       origin: new google.maps.Point(0,0), // origin
      anchor: new google.maps.Point(0, 0) // anchor

   map  = new google.maps.Map(document.getElementById('map-canvas'), {center:  {lat:lat,lng:lng},zoom:12});
   mark = new google.maps.Marker({position:{lat:lat, lng:lng}, map:map,
  icon: icon

window.initialize = initialize;

var redraw = function(payload) {
    lat =;
    lng = payload.message.lng;
    map.setCenter({lat:lat, lng:lng, alt:0});
    mark.setPosition({lat:lat, lng:lng, alt:0});
    lineCoords.push(new google.maps.LatLng(lat, lng));
    var lineCoordinatesPath = new google.maps.Polyline({
      path: lineCoords,
      geodesic: true,
      strokeColor: '#FF0000'

var pnChannel = "map-channel";

var pubnub = new PubNub({
  publishKey:   'pub-c-bc8379c9-1267-42ff-b44b-1018177a151a',
  subscribeKey: 'sub-c-5185bafa-9b23-11ea-8e71-f2b83ac9263d'

pubnub.subscribe({channels: [pnChannel]});

setInterval(function() {
    pubnub.publish({channel:pnChannel, message:{ + 0.001, lng:window.lng + 0.01}});
  }, 10000);

Error Facing:

 Uncaught TypeError: Cannot read property 'setCenter' of undefined

Source: New feed
Source Url How to use google maps along with pub nub in angular