calling a function in angular controller from google api present in view

Question

i am using google places details api. So in my src attribute I put google api which has a callback named initMap Here is the code

<div class="tab-pane active"  id="timeline">
 <p class="lead">Location</p>
 <hr>
 <div class="row">
  <div class="col-md-1"></div>
  <div class="col-md-8">
   <h2><a href="#"></a> 
    <span>location <b style="color:black;"> kolkata</b></span></h2>
      <p></p>
      <div id="map" style="width:100%;height:400px;"></div>
      <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places&callback=initMap"></script>
     <p></p>
    </div>
  </div>
</div>

In same html I have written initMap function

<script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 22.652687, lng: 88.376882},
      zoom: 15
    });

    var infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);

    service.getDetails({
      placeId: 'ChIJvYbRT7Gd-DkR6QZQfJP9ZJg'
    }, function(place, status) {
      debugger
      if (status === google.maps.places.PlacesServiceStatus.OK) {
        var marker = new google.maps.Marker({
          map: map,
          position: place.geometry.location
        });
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +
            'Place ID: ' + place.place_id + '<br>' +
            place.formatted_address + '</div>');
          infowindow.open(map, this);
        });
      }
    });
}
</script>

This works perfectly as long as this function is present inside script tag. How do I call initMap inside controller?

Answer 1

You can't call it that way but instead you will load the script using javascript inside your controller when your app is loaded using document.createElement('script') then hook up a onload event listener then append it inside head head tag.

most likely:

var script = document.createElement('script');
script.src = 'google api script';
script.onload = function () {
// your onload function
$scope.onload();
$scope.$digest();
};

document.querySelector('head').appendChild(script);

this way you have control over what ng stuff you want to do everytime it loads. hope that helps

Answer 2

When inside your HTML page, you create a function, the function will be automatically assigned to the window object, because that's the default scope of the scripts included in the page.

So from your controller, you should be able to simply call the function just using: window.initMap();