Render Iframe google Maps with AngularJs

I'm setting up a directive to render an iframe from google maps within my app.

And I managed to do it this way:

<google-iframe location="item.Location"></google-iframe>

directive.js

function googleIframe() {
    var directive = {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {
            location: '='
        },
        template: '<iframe src="%url%" height="250" width="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" alt="{{location.url}}"></iframe>',
        link: link
    };
    return directive;

    function link(scope, element) {
        var url = [
            'https://www.google.com/maps/embed/v1/place?',
            'key=AIzaSyCBOhDJn9LAUiqONa-y-f1l2JmFEoadkaQ',
            '&q=', scope.location.lat, ',', scope.location.lng,
            '&zoom=', scope.location.zoom
        ];
        element[0].outerHTML = element[0].outerHTML.replace('%url%', url.join(""));
    }

However, what I would really like is to render the correct url in conjunction with the directive, instead of replacing the url after rendering the directive.

Does anyone have any ideas?