How to rewrite this script from index.html into angularjs app.js

Question

Currently I have this script in my index.html inside the head tabs. I should move this to app.js, right? Either way, can you help me? How do I modify the script to fit in app.js? NOTE: I'm using angular.js so the app.js is an angular.module

    <script>
  function initialize() {
      var mapOptions = {
          zoom: 14,
          center: new google.maps.LatLng(59.3332346,18.0280576)
      };

      var map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
  }

  function loadScript() {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +
              'callback=initialize';
      document.body.appendChild(script);
  }

  window.onload = loadScript;

Answer 1

Move the loadScript into an actual <script> tag within the HEAD of your document. It is unnecessary to load the script using JavaScript.

Once you've done that create a directive for your map:

app.directive('map', function mapDirective() {

    return {

        restrict: 'A',
        scope: {
            options: '=map'
        },
        link: function link(scope, element) {
            new google.maps.Map(element[0], scope.options);
        }

    }

});

Setup your HTML document to utilise the directive:

<section ng-controller="MapController">
    <div data-map="options"></div>
</section>

And then finally create your controller to pass in the map options:

app.controller('MapController', function MapController($scope) {

    $scope.options = {
        zoom: 14,
        center: new google.maps.LatLng(59.3332346,18.0280576)
    }

});