CODEWITHSUNDEEP
angularjsgoogle-maps
Maria
Maria

Reputation: 11

load script on angular partial

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.

Upvotes: 0

Views: 164

Answers (1)

syciphj
syciphj

Reputation: 996

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!

Upvotes: 1

Related Questions