Render Iframe google Maps with Angularjs

Asked

Viewed 430 times

1

I’m building a directive to render a google maps iframe inside my app.

And I managed to do it this way:

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

js directive.

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 to do is to render the correct url in conjunction with the directive, rather than replacing the url after rendering the directive.

Does anyone have any idea?

  • Outside the subject, but take a look at Leaflet.js Really very easy (well but that Google API) and allows you to use at the same time the maps of Google, Bing, Yandex, OSM etc... with layer, pop-up etc...

  • Thanks for the tip, but I really need to use the google service.

  • Angular Google Maps is a plugin with Angularjs ready Directives. Link: https://angular-ui.github.io/angular-google-maps/#!/

  • I know... but I don’t want to use a lot to do just this.

  • 1

    This question from the OS in English answers your question: http://stackoverflow.com/questions/20045150/angular-js-how-to-set-an-iframe-src-attribute-from-a-variable

  • An alternative of using a plugin already ready, as also mentioned by @Onosendai would be this: https://github.com/allenhwkim/angularjs-google-maps I use and I think excellent

Show 1 more comment
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.