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>

Remove callback=initMap. your error says that your code executes before script of map library loaded — Ankur
– Ankur, Commented Jan 19, 2017 at 14:39

Ankur · Accepted Answer · 2017-01-19 14:48:28Z

1

Use this in controller

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

edited Jan 19, 2017 at 14:48

answered Jan 19, 2017 at 14:28

Ankur

3,2095 gold badges30 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Addi Khan Over a year ago

i don't want like this SDK

Ankur Over a year ago

add your initialization code in $window.initMap = function () { /// } if you don't want to remove callback=initMap

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related