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...
– Peter
Thanks for the tip, but I really need to use the google service.
– Marcelo Aymone
Angular Google Maps is a plugin with Angularjs ready Directives. Link: https://angular-ui.github.io/angular-google-maps/#!/
– OnoSendai
I know... but I don’t want to use a lot to do just this.
– Marcelo Aymone
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
– Vinícius Gobbo A. de Oliveira
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
– celsomtrindade