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.

HTML:

   https://cdn.pubnub.com/sdk/javascript/pubnub.4.19.0.min.js


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

JS:

         window.lat = 28.7041;
         window.lng = 77.1025;

        function getLocation() {
            if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(updatePosition);
          }

       return null;
       };

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

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

     function currentLocation() {
        return {lat:window.lat, 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 = payload.message.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'
    });
    lineCoordinatesPath.setMap(map);
  };

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]});
pubnub.addListener({message:redraw});

setInterval(function() {
    pubnub.publish({channel:pnChannel, message:{lat:window.lat + 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