Google Maps API dynamic load with AngularJS

2020-05-08 08:04发布

问题:

I'm trying to load Google Maps API using AngularJS:

<html data-ng-app="search-app">
<head data-ng-controller="GoogleMaps">
    <script ng-src="{{mapsUrl}}" type="text/javascript"></script>
....
</head>

and controller for that part:

search.controller('GoogleMaps', [
    '$scope','$sce',
    function GoogleMaps($scope,$sce) {
        var mapsUrl = '//maps.google.com/maps/api/js?sensor=false&key=my_api_key';
        $scope.mapsUrl = $sce.trustAsResourceUrl(mapsUrl);
    }
]);

but when the Google Map API is called within the search controller it throws and error

this.setMap is not a function

for

function CustomMarker(latlng, map, args) {
    this.latlng = latlng;
    this.args = args;
    this.setMap(map);
}

but when I will replace {{mapsUrl}} with full URL in the HTML header it will works.

Any thoughts on that?

回答1:

I have ended up appending URL to the header as a script on load event

function require(url, callback)
{
    var element = document.createElement("script");
    element.src = url;
    element.type="text/javascript";
    element.addEventListener('load', callback);
    document.getElementsByTagName("head")[0].appendChild(e);
}