CODEWITHSUNDEEP
angularjsgoogle-maps
Haidar
Haidar

Reputation: 123

How to pass an angular function inside scpoe as a callback to the google maps api

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQqRCD1ttWhl-kU9sTEEDmkkJivSpZAS8&callback=initializeMap"> </script>

How can I pass the initializeMap callback function to the google maps api if it is inside scope.

Upvotes: 0

Views: 577

Answers (1)

georgeawg
georgeawg

Reputation: 48968

Omit the callback and put the initialization function in a directive

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"
        async defer>
</script>

<init-map map="vm.map">
</init-map>

JS

app.directive("initMap", function($window) {
    return {
        restrict: "E",
        template: '<div style="height: 400px;">XXX</div>',
        link: function(scope,elem,attrs) {
            var jElem = elem.find('div')[0];
            scope[attrs.map] = new google.maps.Map(jElem, {
                center: {lat: -34.397, lng: 150.644},
                zoom: 8
            });
        }
    };
});

The above directive will create a new map using the scope variable defined by the map attribute.

The DEMO on JSFiddle

Upvotes: 1

Related Questions