Google Maps API dynamic load with AngularJS

Question

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?

JackTheKnife · Accepted Answer · 2018-12-07 21:25:15Z

0

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);
}

answered Dec 7, 2018 at 21:25

JackTheKnife

4,2249 gold badges72 silver badges137 bronze badges

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

Collectives™ on Stack Overflow

Google Maps API dynamic load with AngularJS

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related