load script on angular partial

Question

I am learning angular and I want to include a map in an angular partial. As i have done it it loads on the partial, but only if you reload the page.

The google maps script + API Key is included in the index.html

At the moment the script is inlcuded like this in the partial

<!-- map -->
<div id="map" class="col-lg-12">
<script type="text/javascript" src="js/map.js"></script>
</div>
<!-- /map -->

My page controller is empty, as I understand it i somehow have to call it here

app.controller('PageCtrl', function (/* $scope, $location, $http */) {
  console.log("Page Controller ready");

});

And the map.js:

   function init() {
    var e = {
            zoom: 8,
            center: new google.maps.LatLng(12.00, 12.00),
            styles: [{
                featureType: "all",
                elementType: "all",
                stylers: [{
                    visibility: "on"
                }]
            }, {
                featureType: "all",
                elementType: "labels",
                stylers: [{
                    visibility: "off"
                }, {
                    saturation: "-100"
                }]
            }, {
                featureType: "all",
                elementType: "labels.text.fill",
                stylers: [{
                    saturation: 36
                }, {
                    color: "#000000"
                }, {
                    lightness: 40
                }, {
                    visibility: "off"
                }]
            }, {
                featureType: "all",
                elementType: "labels.text.stroke",
                stylers: [{
                    visibility: "off"
                }, {
                    color: "#000000"
                }, {
                    lightness: 16
                }]
            }, {
                featureType: "all",
                elementType: "labels.icon",
                stylers: [{
                    visibility: "off"
                }]
            }, {
                featureType: "administrative",
                elementType: "geometry.fill",
                stylers: [{
                    color: "#000000"
                }, {
                    lightness: 20
                }]
            }, {
                featureType: "administrative",
                elementType: "geometry.stroke",
                stylers: [{
                    color: "#000000"
                }, {
                    lightness: 17
                }, {
                    weight: 1.2
                }]
            }, {
                featureType: "landscape",
                elementType: "geometry",
                stylers: [{
                    color: "#000000"
                }, {
                    lightness: 20
                }]
            }, {
                featureType: "landscape",
                elementType: "geometry.fill",
                stylers: [{
                    color: "#4d6059"
                }]
            }, {
                featureType: "landscape",
                elementType: "geometry.stroke",
                stylers: [{
                    color: "#4d6059"
                }]
            }, {
                featureType: "landscape.natural",
                elementType: "geometry.fill",
                stylers: [{
                    color: "#4d6059"
                }]
            }, {
                featureType: "poi",
                elementType: "geometry",
                stylers: [{
                    lightness: 21
                }]
            }, {
                featureType: "poi",
                elementType: "geometry.fill",
                stylers: [{
                    color: "#4d6059"
                }]
            }, {
                featureType: "poi",
                elementType: "geometry.stroke",
                stylers: [{
                    color: "#4d6059"
                }]
            }, {
                featureType: "road",
                elementType: "geometry",
                stylers: [{
                    visibility: "on"
                }, {
                    color: "#7f8d89"
                }]
            }, {
                featureType: "road",
                elementType: "geometry.fill",
                stylers: [{
                    color: "#7f8d89"
                }]
            }, {
                featureType: "road.highway",
                elementType: "geometry.fill",
                stylers: [{
                    color: "#7f8d89"
                }, {
                    lightness: 17
                }]
            }, {
                featureType: "road.highway",
                elementType: "geometry.stroke",
                stylers: [{
                    color: "#7f8d89"
                }, {
                    lightness: 29
                }, {
                    weight: .2
                }]
            }, {
                featureType: "road.arterial",
                elementType: "geometry",
                stylers: [{
                    color: "#000000"
                }, {
                    lightness: 18
                }]
            }, {
                featureType: "road.arterial",
                elementType: "geometry.fill",
                stylers: [{
                    color: "#7f8d89"
                }]
            }, {
                featureType: "road.arterial",
                elementType: "geometry.stroke",
                stylers: [{
                    color: "#7f8d89"
                }]
            }, {
                featureType: "road.local",
                elementType: "geometry",
                stylers: [{
                    color: "#000000"
                }, {
                    lightness: 16
                }]
            }, {
                featureType: "road.local",
                elementType: "geometry.fill",
                stylers: [{
                    color: "#7f8d89"
                }]
            }, {
                featureType: "road.local",
                elementType: "geometry.stroke",
                stylers: [{
                    color: "#7f8d89"
                }]
            }, {
                featureType: "transit",
                elementType: "geometry",
                stylers: [{
                    color: "#000000"
                }, {
                    lightness: 19
                }]
            }, {
                featureType: "water",
                elementType: "all",
                stylers: [{
                    color: "#2b3638"
                }, {
                    visibility: "on"
                }]
            }, {
                featureType: "water",
                elementType: "geometry",
                stylers: [{
                    color: "#2b3638"
                }, {
                    lightness: 17
                }]
            }, {
                featureType: "water",
                elementType: "geometry.fill",
                stylers: [{
                    color: "#24282b"
                }]
            }, {
                featureType: "water",
                elementType: "geometry.stroke",
                stylers: [{
                    color: "#24282b"
                }]
            }, {
                featureType: "water",
                elementType: "labels",
                stylers: [{
                    visibility: "off"
                }]
            }, {
                featureType: "water",
                elementType: "labels.text",
                stylers: [{
                    visibility: "off"
                }]
            }, {
                featureType: "water",
                elementType: "labels.text.fill",
                stylers: [{
                    visibility: "off"
                }]
            }, {
                featureType: "water",
                elementType: "labels.text.stroke",
                stylers: [{
                    visibility: "off"
                }]
            }, {
                featureType: "water",
                elementType: "labels.icon",
                stylers: [{
                    visibility: "off"
                }]
            }]
        },
        t = document.getElementById("map"),
        l = new google.maps.Map(t, e);
    new google.maps.Marker({
        position: new google.maps.LatLng(48.84, 12.95),
        map: l,
        title: "Snazzy!"
    })
}
google.maps.event.addDomListener(window, "load", init);

My guess is the part

google.maps.event.addDomListener(window, "load", init);

has to happen in the controller, but I cant make it work.

It would help if you could add the missing part of your code that could reproduce the issue, or the error that you are having (what the console says?) — betofarina
– betofarina, Commented Feb 1, 2018 at 14:42
console only displays 'Page Controller reporting for duty.', no errors or warnings. The map loads on reload, doesnt load when I switch partials. Therefore my assumptions it needs to be called in the controller, I just cant make it work there. — Maria
– Maria, Commented Feb 1, 2018 at 15:34

syciphj · Accepted Answer · 2018-02-06 05:08:00Z

1

If you need to reload the page for it to work it means whatever is needed to instantiate the map (i.e. new google.maps.Map()) is not ready yet. Plus it looks like you have another script for your map initialization which should all be in your controller or in a directive if you plan to take that implementation where you will be reusing the map.

If I wanted to load the map synchronously (slower in performance compared to async which is non-blocking) I'd set it like this:

partial.html

  <head>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <script src="app.module.js"></script>
    <script src="synchronous.controller.js"></script>
  </head>

  <body ng-app="app">
    <div id="view" ng-controller="SynchronousController as vm">
      <h1>{{vm.title}}</h1>
      <div id="map"></div>
    </div>
  </body>

sychronous.controller.js

function SynchronousController() {
    var vm = this;
    vm.title = 'Loading map synchronously';
    vm.initMap = initMap;

    // manually call your initMap function
    vm.initMap();

    function initMap() {
      vm.map = new google.maps.Map(document.getElementById('map'), {
        center: {
          lat: -34.397,
          lng: 150.644
        },
        zoom: 8
      });
    }
  }

I've created some working examples on how to:

They all follow some of the existing best practices by John Papa on Angular 1.X

Be sure to use your own API key

If you're also interested in seeing how to make your map into a directive to be reused in any partial, this is a good example.

Hope that helps!

answered Feb 6, 2018 at 5:08

syciphj

9965 silver badges11 bronze badges

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

2 Comments

Maria Over a year ago

thank you very much, with this example i could make it work!

syciphj Over a year ago

glad to have helped!

Collectives™ on Stack Overflow

load script on angular partial

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