Wie übergebe ich eine ENV-Variable in das Skript-Tag

Question

Ich versuche, meinen API-Schlüssel, der sich in meiner application.yml-Datei befindet, in ein js-Skript-Tag für google maps zu übergeben, ist das möglich? Wenn nicht, was ist der beste Weg, damit umzugehen? Außerdem verwende ich den Figaro-Edelstein, um ENV-Variablen zu speichern. Danke im Voraus.

<% 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 %> 

Fehler

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

Dies ist, was ich habe, und es gibt mir die Störung, die ich geschrieben, wenn ich in den Schlüssel setzen direkt funktioniert es.

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

Answer 1

Sie sollten in der Lage sein, es wie jede andere ENV Variable zu behandeln ERB mit:

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

Answer 2

Versuchen Sie, diese #{ENV['MAPS_API_KEY']}, ich hatte ein ähnliches Problem vor:

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