how to use google map in angularjs with script of key Without Google SDK

Question

i don't want Google SDK, i have following code..i but its show error when i use tag its working fine but i am using angularjs its show error , normal page with script in page its working fine..how to define initMap method in angular

ReferenceError: google is not defined

export default class locationComponent {
  /*@ngInject*/
  constructor($http, $scope, $q, socket, $document) {
    this.$http = $http;
    this.$scope = $scope;
    this.$q = $q;
    this.socket = socket;
    this.$document = $document;
     this.initMap();
  }

  initMap() {  
        var myLatLng = new google.maps.LatLng(parseFloat(-25.363),parseFloat(131.044));  //{lat: inputlng, lng: inputlat};
		console.log('latutye');
		
        var map = new google.maps.Map(document.getElementById('mapsss'), {
          zoom: 15,
          center: myLatLng,
		   mapTypeIds: ['roadmap', 'terrain']
        });

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Hello World!'
        });
      }
 
}

<div class="inner-wrapper">
	<section role="main" class="content-body">
		<header class="page-header">
			<h2> Current Location</h2>
			<div class="right-wrapper pull-right">
				<ol class="breadcrumbs">
					<li>
						<a href="/dashboard">
							<i class="fa fa-home"></i>
						</a>
					</li>
					<li><span></span></li>
					<li><span>Location</span></li>
				</ol>
				<a class="sidebar-right-toggle" data-open="sidebar-right"><i class="fa fa-chevron-left"></i></a>
			</div>
		</header>
		<div class="modal-backdrop fade in" id="loading_div" style="display:none;">
			<div class="loader"></div>
		</div>
		<div class="row">
			<div class="col-lg-12">				
					<section class="panel">						
						<header class="panel-heading">
							<div class="panel-actions">
							</div>
							<h2 class="panel-title"> Current Location </h2>
						</header>
						<div class="panel-body">
							<div class="form-group">
								  <div  style="height: 500px;" id="mapsss" class="panel-body">
            
        </div>
							</div>
						</div>
					</section>
				
				
				
			</div>
		</div>
	</section>
</div>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR KEY&callback=initMap">
    </script>
	

Answer 1

Use this in controller

$window.initMap = function () { /// }