0

I am trying to use the Google Maps api to display a map from data from a json file, however when i try to used the json data i get the error 'Error: [$interpolate:noconcat] Error while interpolating'

<iframe id="map" width="750" height="450" frameborder="0" style="border:0" ng-src="https://www.google.com/maps/embed/v1/place?q={{office.LocAddressline1}}&key=AIzaSyBGAHnplGPjFoVvShk6Tsna3-DN8rHQBI8" allowfullscreen></iframe>

I have tried using just 'src' instead of 'ng-src' and i have tried using 'trustSrc' neither work. From what i understand its because the data is being accessed before it has loaded but i don't know how to get around that in html, in javascript i can check if the data has been loaded first before it is accessed.

Snow
  • 61
  • 1
  • 9
  • You need to create a function in your controller that builds the URL and uses $sce.trustAsResourceUrl to "trust" it. – Gary Dec 14 '15 at 15:06

2 Answers2

0

This is happening because you are binding more than one expressions to src or ng-src. You need to keep the declaration separate from the URL. The string concatenation inside the expression does not works as the data is being accessed before it is loaded as it is happening in your case.

There are solutions already offered on SO for this issue, you can take a look at this one question and the second response may address your problem.

AngularJS multiple expressions concatenating in interpolation with a URL

Hope this Helps!!

Community
  • 1
  • 1
AniV
  • 3,997
  • 1
  • 12
  • 17
0

I too had the same problem You can do it like this. You need to inject the $sce service in the controller.

 $scope.LocationURL=$sce.trustAsResourceUrl("https://www.google.com/maps/embed/v1/place?q=" + $scope.office.LocAddressline1 +"&key=AIzaSyBGAHnplGPjFoVvShk6Tsna3-DN8rHQBI8");

and then in your html page 

<iframe id="map" width="750" height="450" frameborder="0" style="border:0" src="{{LocationURL}}" allowfullscreen></iframe>
Mudit Juneja
  • 165
  • 9