Add AngularJS expression to Google map embed

Question

I'm trying to add an AngularJS expression to a Google Maps embed, here is my code:

<iframe width="240" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q={{Property.Address.Location.Latitude}},{{Property.Address.Location.Longitude}}&amp;output=embed"></iframe>

It does not display the correct values though.

I ended up using Angular Google Maps; angular-ui.github.io/angular-google-maps/#! — alib0ng0
– alib0ng0, Commented Dec 15, 2016 at 9:16

Mistalis · Accepted Answer · 2016-12-12 15:28:34Z

1

Can you try to use ng-src instead of src?

<iframe width="240" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" ng-src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q={{Property.Address.Location.Latitude}},{{Property.Address.Location.Longitude}}&amp;output=embed"></iframe>

From Angular ngSrc documentation

Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

answered Dec 12, 2016 at 15:28

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

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

Collectives™ on Stack Overflow

Add AngularJS expression to Google map embed

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related