title: Trying to create google map using javascript in angular
body: <p>I am trying to create the google map with PubNub and angular, but the map is not displaying if I use the angular framework, but If I use directly javascript and HTML it is working.</p>
  
  <p>can any one tell me wat I am doing wrong.</p>
  
  <p><strong>HTML: app.component.html</strong></p>
  
  <pre><code>   &lt;!doctype html&gt;
     &lt;html&gt;
       &lt;head&gt;
       &lt;title&gt;Google Maps Example&lt;/title&gt;
        &lt;script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.19.0.min.js"&gt;&lt;/script&gt;
       &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /&gt;
       &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" /&gt;
       &lt;/head&gt;
   &lt;body&gt;
     &lt;div class="container"&gt;
       &lt;h1&gt;PubNub Google Maps Tutorial - Live Device Location&lt;/h1&gt;
       &lt;div id="map-canvas" style="width:600px;height:400px"&gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;key=APIKEY&amp;callback=initialize"&gt;&lt;/script&gt;
    &lt;script src="../app/app.js"&gt;&lt;/script&gt;
   &lt;/body&gt;
  </code></pre>
  
  <p>   </p>
  
  <p>After this I have created Javascript file, Instead of using Typescript.</p>
  
  <p><strong>app.js:</strong></p>
  
  <pre><code>window.lat = 37.7850;
  window.lng = -122.4383;
  
  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());}, 10000);
  
  function currentLocation() {
    return {lat:window.lat, lng:window.lng};
  };
  
  var map;
  var mark;
  
  var initialize = function() {
    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});
  };
  
  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});
  };
  
  var pnChannel = "map2-channel";
  
  var pubnub = new PubNub({
    publishKey:   'YOUR_PUB_KEY',
    subscribeKey: 'YOUR_SUB_KEY'
  });
  
  pubnub.subscribe({channels: [pnChannel]});
  pubnub.addListener({message:redraw});
  
  setInterval(function() {
    pubnub.publish({channel:pnChannel, message:currentLocation()});
  }, 5000);
  </code></pre>
  
  <p>can anyone help me with how to solve this problem..</p>