How to pass an ENV variable into script tag

Question

I'm trying to pass my api key which is in my application.yml file into a js script tag for google maps, is this possible? If not, what is the best way to handle this? Also, I'm using the Figaro gem to store ENV variables. Thanks in advance.

    <% if @location.latitude.present? && @location.longitude.present? %>
  <script>
    var myLatLng = {lat: <%= @location.latitude %>, lng: <%= @location.longitude %>};
    function initAutocomplete() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: myLatLng,
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: '<%= @location.name %>'
    });

    // Create the search box and link it to the UI element.
    var input = document.getElementById('pac-input');
    var searchBox = new google.maps.places.SearchBox(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

    // Bias the SearchBox results towards current map's viewport.
    map.addListener('bounds_changed', function() {
      searchBox.setBounds(map.getBounds());
    });

    var markers = [];
    // Listen for the event fired when the user selects a prediction and retrieve
    // more details for that place.
    searchBox.addListener('places_changed', function() {
      var places = searchBox.getPlaces();

      if (places.length == 0) {
        return;
      }

      // Clear out the old markers.
      markers.forEach(function(marker) {
        marker.setMap(null);
      });
      markers = [];

      // For each place, get the icon, name and location.
      var bounds = new google.maps.LatLngBounds();
      places.forEach(function(place) {
        var icon = {
          url: place.icon,
          size: new google.maps.Size(71, 71),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(17, 34),
          scaledSize: new google.maps.Size(25, 25)
        };

        // Create a marker for each place.
        markers.push(new google.maps.Marker({
          map: map,
          icon: icon,
          title: place.name,
          position: place.geometry.location
        }));

        if (place.geometry.viewport) {
          // Only geocodes have viewport.
          bounds.union(place.geometry.viewport);
        } else {
          bounds.extend(place.geometry.location);
        }
      });
    map.fitBounds(bounds);
  });
}
  </script>
  <input id="pac-input" class="controls" type="text" placeholder="Search Box">
  <div id="map"></div>
  <script src="https://maps.googleapis.com/maps/api/js.erb?key=MAPS_API_KEY&libraries=places&callback=initAutocomplete"
         async defer></script


<% end %>

Error

https://maps.googleapis.com/maps/api/js.erb?key=&libraries=places&callback=initAutocomplete

This is what I have and it gives me the error I posted, if I put the Key in directly it works.

<script src="https://maps.googleapis.com/maps/api/js.erb?key=<%= ENV['MAPS_API_KEY'] %>&libraries=places&callback=initAutocomplete"
         async defer></script

Show us the code you're using to generate the page. – Greg Borbonus Apr 05 '16 at 00:26 — Greg Borbonus, Apr 05 '16 at 00:26

score 2 · Answer 1 · edited Mar 20 '18 at 22:52

2

This worked for me:

<script async defer src=<%="https://maps.googleapis.com/maps/api/js?key=#{ENV['GOOGLE_MAPS_API_KEY']}&callback=initMap"%> type="text/javascript"></script>

edited Mar 20 '18 at 22:52

rollstuhlfahrer

3,988
9
25
38

answered Mar 20 '18 at 22:32

user2799827

1,077
3
18
54

score 0 · Answer 2 · answered Apr 05 '16 at 00:30

0

You should be able to treat it as any other ENV variable using ERB:

...
<script src="https://maps.googleapis.com/maps/api/js.erb?key=<%=ENV['MAPS_API_KEY']%>&libraries=places&callback=initAutocomplete"
         async defer></script>

answered Apr 05 '16 at 00:30

Anthony E

11,072
2
24
44

I tried that, unfortunately it throws a 'get' error. – halfacreyum Apr 05 '16 at 00:34
`Figaro.env.MAPS_API_KEY` also gives the same error? – Anthony E Apr 05 '16 at 00:36
Would I implement 'Figaro.env.MAPS_API_KEY' inside of an embedded ruby tag? – halfacreyum Apr 05 '16 at 00:45
You could, but I'm trying to figure out what's causing your error. If figaro is setup correctly, it should give the same value as `ENV['MAPS_API_KEY']` – Anthony E Apr 05 '16 at 00:47
I believe its set up correctly, its being used for AWS: ACCESS,SECRET,BUCKET, EMAIL, PASSWORD, and GEOCODER. – halfacreyum Apr 05 '16 at 00:51
Ok, so is `ENV['MAPS_API_KEY']` not a valid key in your application.yml? Can you clarify the error you mentioned? – Anthony E Apr 05 '16 at 00:53
I just posted what I currently have. – halfacreyum Apr 05 '16 at 00:57
No, It's like its not seeing it. In the GET error above the key is just blank. – halfacreyum Apr 05 '16 at 01:17
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/108230/discussion-between-anthony-e-and-halfacreyum). – Anthony E Apr 05 '16 at 01:18

score 0 · Answer 3 · answered Apr 05 '16 at 20:30

0

Try this #{ENV['MAPS_API_KEY']}, I had a similar issue before:

<script src="https://maps.googleapis.com/maps/api/js.erb?key=<%=#{ENV['MAPS_API_KEY']}%>&libraries=places&callback=initAutocomplete" async defer></script>

answered Apr 05 '16 at 20:30

jdgray

1,863
1
11
19

lin hanyu · Answer 4 · 2019-02-25T08:00:31.097

I guess you just dont wanna put your api_key into a html tag and make your key vulnerable. You can try following code under your index.html, it works for me.

<div id="google">
  <script type="text/javascript">
    import {
      GOOGLE_MAP_API
    } from "<the location you save your apikey>";

    function changeSrc() {
      document.getElementById("google").src = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAP_API}`
    }
  </script>
</div>

score 0 · Answer 5 · answered Apr 21 '21 at 09:06

0

Note that if you're not using Ruby (or Figaro) and you're using Webpack, you can inject it via the HtmlWebpackPlugin.

answered Apr 21 '21 at 09:06

karfus

869
1
13
20

score 0 · Answer 6 · answered Dec 07 '21 at 15:27

0

You can use a data tag to pass env variables

<script id="div" data-key="<%=ENV['MAPS_API_KEY']%>">
  const div = document.getElementById("div");
  console.log(div.dataset.key);
</script>

answered Dec 07 '21 at 15:27

Merouane Boucenna

171
2
7

How to pass an ENV variable into script tag

6 Answers6