Divide google key and angular directive google map into two files

Question

I have created an angularJS directive to call the google maps api. The directive looks like that:

      angular.module('sbAdminApp')
      .directive('allWash', function () {
       return {
        templateUrl: 'static/app/scripts/directives/googleMap/allWash.html',
        restrict: 'E',
        replace: true,
        controller: function ($scope, WashService) {

            $scope.initMap = new function () {
                var locations = [
                    ['Bondi Beach', 52.229676, 21.012228999999934, 4],
                    ['Coogee Beach', 52.14276459999999, 21.02135450000003, 5],
                    ['Cronulla Beach', -34.028249, 151.157507, 3],
                    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
                    ['Maroubra Beach', -33.950198, 151.259302, 1]
                ];

                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 10,
                    center: new google.maps.LatLng(-33.92, 151.25),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });

                var infowindow = new google.maps.InfoWindow();

                var marker, i;

                for (i = 0; i < locations.length; i++) {
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                        map: map
                    });

                    google.maps.event.addListener(marker, 'click', (function (marker, i) {
                        return function () {
                            infowindow.setContent(locations[i][0]);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));
                }

            }

        }
    }
});

The google also demands to create a key which I actually created and put it into the index.html file, like that:

    <script src="http://maps.google.com/maps/api/js?key=AIzaSyD5bgIqM-C7WVWkaGDa0AE2luY-dbF6nBA"
      async defer
      type="text/javascript"></script>

My html file (allWash.html file which is connected to the directive) looks like:

    <script type="text/ng-template" id="allWash.html">

<div>
    <div id="map" style="width: 600px; height: 600px;" ng-init="initMap()"></div>
</div>

</script>

When I want to call the diretive at diffrent html page I do <all-wash></all-wash>

The whole code creates a fail:

I think it is connected to the google key which I put into index.html file, but I'm not sure so that I don't know how to solve this issue.

add a plunker with your code pls – Carlos Arauz Mar 19 '17 at 21:40 — Carlos Arauz, Mar 19 '17 at 21:40

score 0 · Answer 1 · edited May 23 '17 at 11:46

You may refer with this thread. This error might happen if you load the script before the DOM was loaded. Try to move the script to the end of body and check if it works.

Also, it might be due to the map div not being rendered before the javascript runs that needs to access it. Check it here. "You should put your initialization code inside an onload function or at the bottom of your HTML file, just before the tag, so the DOM is completely rendered before it executes (note that the second option is more sensitive to invalid HTML)."

Divide google key and angular directive google map into two files

1 Answers1