0

I'm trying to insert an API key to the HTML header as

<script src="//maps.google.com/maps/api/js?sensor=false&key={{google_maps_key}}
        type="text/javascript">
</script>

but it looks like is not populated on time before called to the Google Maps API for markers.

Current code:

<head ng-init="google_maps_key = 'my_key_is_here'">
    <script ng-src="//maps.google.com/maps/api/js?sensor=false&key={{google_maps_key}}"
            type="text/javascript">
    </script>
georgeawg
  • 48,608
  • 13
  • 72
  • 95
JackTheKnife
  • 3,795
  • 8
  • 57
  • 117
  • 1
    Using AngularJS markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until AngularJS replaces the expression inside {{hash}}. The ngSrc directive solves this problem. – BartoszTermena Dec 07 '18 at 15:47
  • @BartoszTermena Somehow `ng-src` is not working for me. Getting an error: `Error: [$interpolate:noconcat] http://errors.angularjs.org/1.4.8/$interpolate/noconcat?p0=%2F%2Fmaps.google.com%2Fmaps%2Fapi%2Fjs%3Fsensor%3Dfalse%26key%3D%7B%7Bapikey%7D%7D` – JackTheKnife Dec 07 '18 at 16:42
  • in code above in your question you have typo - you miss "at the end of ng-src try this: – BartoszTermena Dec 07 '18 at 16:44
  • – BartoszTermena Dec 07 '18 at 16:44
  • @BartoszTermena fixed but still getting that `$interpolate:noconca` error. Updated OP with the code snippet – JackTheKnife Dec 07 '18 at 16:50
  • it turns out that probably you can not use Angular in this way. Check this: – BartoszTermena Dec 07 '18 at 17:02
  • 1
    https://stackoverflow.com/questions/27306706/how-to-bind-script-elements-src-attribute-in-angularjs – BartoszTermena Dec 07 '18 at 17:02
  • 1
    @BartoszTermena I think it may be my problem described in another post here https://stackoverflow.com/questions/53675172/google-maps-api-dynamic-load-with-angularjs – JackTheKnife Dec 07 '18 at 18:44

0 Answers0