marker-animate-unobtrusive dynamic loading with angular-load

var app = angular.module('plunker', ['angularLoad']);

app.controller('MainCtrl', function($scope, angularLoad) {
  $scope.name = 'World';
  
  angularLoad.loadScript('https://maps.googleapis.com/maps/api/js?sensor=false')
  .then(function() {
    return angularLoad.loadScript('https://cdnjs.cloudflare.com/ajax/libs/marker-animate-unobtrusive/0.2.8/vendor/markerAnimate.js')
  })
  .then(function() {
    return angularLoad.loadScript('https://cdnjs.cloudflare.com/ajax/libs/marker-animate-unobtrusive/0.2.8/SlidingMarker.min.js')
  })
  .then(function() {
    initialize();
    run();
  });
  
});

var marker, map;
function initialize() {
    var myLatlng = new google.maps.LatLng(32.520204, 34.937258);
    var mapOptions = {
        zoom: 4,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    marker = new SlidingMarker({
        position: myLatlng,
        map: map,
        title: 'I\m sliding marker'
    });

    var $log = $("#log");
    
    $log.html(
        "<b>left click</b> to call setPosition<br/>" + 
        "<b>right click</b> to call setPositionNotAnimated<br/>");
    
    google.maps.event.addListener(marker, 'position_changed', function () {
        $log.html($log.html() + "marker.position_changed<br/>");
    });
}

function run() {
  google.maps.event.addListener(marker, 'animationposition_changed', function() {
      map.panTo(marker.getAnimationPosition());
  });

  var clickHandler = function (event, clickType) {
      var duration = parseInt($('#durationOption').val());

      if (duration < 0) {
          duration = 1;
          $('#durationOption').val(duration);
      }

      marker.setDuration(duration);
      marker.setEasing($('#easingOption').val());

      if (clickType === "left") {
          marker.setPosition(event.latLng);
      } else {
          marker.setPositionNotAnimated(event.latLng);
      }
  };
  
  var leftClickHandler = function(event) { clickHandler(event, "left") };
  var rightClickHandler = function(event) { clickHandler(event, "right") };

  google.maps.event.addListener(map, 'click', leftClickHandler);
  google.maps.event.addListener(map, 'rightclick', rightClickHandler);

  var printEvent = function (instance, eventName) {
      google.maps.event.addListener(instance, eventName, function () {
          console.log("Event: " + eventName);
      });
  };

  printEvent(marker, "click");
  printEvent(marker, "map_changed");
  printEvent(marker, "position_changed");
  printEvent(marker, "animationposition_changed");

  if (window.location.hash == "#iframe") {
      $('#backLink').hide();
      $('#controls').css('height', '55px');
  }  
}

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
    <script data-require="angular-load@*" data-semver="0.2.0" src="https://rawgit.com/urish/angular-load/0.2.0/angular-load.min.js"></script>
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script data-require="jquery-easing@*" data-semver="0.1.3" src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <div id="map_canvas"></div>
    <div id="controls" class="control">
      <div class="row">
        <label for="easingOption">Easing:</label>
        <select id="easingOption">
          <option value="linear">linear</option>
          <option value="swing">swing</option>
          <option value="easeInQuad">easeInQuad</option>
          <option value="easeOutQuad">easeOutQuad</option>
          <option value="easeInOutQuad">easeInOutQuad</option>
          <option value="easeInCubic">easeInCubic</option>
          <option value="easeOutCubic">easeOutCubic</option>
          <option value="easeInOutCubic">easeInOutCubic</option>
          <option value="easeInQuart">easeInQuart</option>
          <option value="easeOutQuart">easeOutQuart</option>
          <option value="easeInOutQuart">easeInOutQuart</option>
          <option value="easeInQuint">easeInQuint</option>
          <option value="easeOutQuint">easeOutQuint</option>
          <option value="easeInOutQuint" selected="">easeInOutQuint</option>
          <option value="easeInSine">easeInSine</option>
          <option value="easeOutSine">easeOutSine</option>
          <option value="easeInOutSine">easeInOutSine</option>
          <option value="easeInExpo">easeInExpo</option>
          <option value="easeOutExpo">easeOutExpo</option>
          <option value="easeInOutExpo">easeInOutExpo</option>
          <option value="easeInCirc">easeInCirc</option>
          <option value="easeOutCirc">easeOutCirc</option>
          <option value="easeInOutCirc">easeInOutCirc</option>
          <option value="easeInElastic">easeInElastic</option>
          <option value="easeOutElastic">easeOutElastic</option>
          <option value="easeInOutElastic">easeInOutElastic</option>
          <option value="easeInBack">easeInBack</option>
          <option value="easeOutBack">easeOutBack</option>
          <option value="easeInOutBack">easeInOutBack</option>
          <option value="easeInBounce">easeInBounce</option>
          <option value="easeOutBounce">easeOutBounce</option>
          <option value="easeInOutBounce">easeInOutBounce</option>
        </select>
      </div>
      <div class="row">
        <label for="durationOption">Duration:</label>
        <input type="number" id="durationOption" value="1000" />
      </div>
      <div class="row" id="backLink">
        <a href="https://github.com/terikon/marker-animate-unobtrusive">More on github →</a>
      </div>
    </div>
    <div id="log" class="control"></div>
  </body>

</html>

html, body, #map_canvas {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
    font-size: 12px;
}

.control {
    position: absolute;
    bottom: 28px;
    right: 6px;
    width: 200px;
    height: 78px;
    background: rgba(0,0,0,0.85);
    box-shadow: rgba(0,0,0,0.5) 0 3px 5px;
    -moz-box-shadow: rgba(0,0,0,0.5) 0 3px 5px;
    -webkit-box-shadow: rgba(0,0,0,0.5) 0 3px 5px;
    color: #fff;
    padding: 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#controls {
    bottom: 28px;
    right: 6px;
    width: 200px;
    height: 78px;
}

#log {
    bottom: 28px;
    left: 6px;
    width: 300px;
    height: 78px;
    overflow-y: scroll;
}

#controls .row {
    overflow: hidden;
    margin-bottom: 10px;
}

#controls .row label {
    width: 60px;
    float: left;
    font-weight: bold;
    margin-right: 10px;
    line-height: 23px;
}

#controls .row select,
#controls .row input {
    width: 120px;
    float: left;
}

#controls .row input#durationOption {
    width: 113px;
}

#controls .row a {
    display: block;
    color: #7EB1FF;
    text-decoration: none;
    font-size: 10px;
}