1

Eu estou montando uma diretiva para renderizar um iframe do google maps dentro da minha app.

E consegui fazer desta forma:

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

diretiva.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(""));
    }

Porém, o que eu gostaria de verdade, é renderizar a url correta em conjunto com a diretiva, ao invés de substituir a url após a renderização da diretiva.

Alguém tem alguma idéia?

6
  • Fora do asunto, mas da uma olhada em Leaflet.js Realmente muito fácil (bem mas que a API Google) e permite usar no mesmo tempo as mapas de Google, Bing, Yandex, OSM etc... com camada, pop-up etc...
    – Peter
    Commented 20/11/2014 às 23:43
  • Obrigado pela dica, mas realmente preciso usar o serviço do google. Commented 20/11/2014 às 23:49
  • Angular Google Maps é um plugin com angularJS directives prontas. Link: angular-ui.github.io/angular-google-maps/#!
    – OnoSendai
    Commented 21/11/2014 às 15:15
  • Eu conheço... Mas não quero usar, muita coisa para fazer só isto aí. Commented 21/11/2014 às 15:38
  • 1
    Esta pergunta do SO em inglês responde sua dúvida: stackoverflow.com/questions/20045150/… Commented 6/04/2015 às 5:20

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .