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 initAutoplete() {
    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=".erb?key=MAPS_API_KEY&libraries=places&callback=initAutoplete"
         async defer></script


<% end %>

Error

.erb?key=&libraries=places&callback=initAutoplete

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

<script src=".erb?key=<%= ENV['MAPS_API_KEY'] %>&libraries=places&callback=initAutoplete"
         async defer></script

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 initAutoplete() {
    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./maps/api/js.erb?key=MAPS_API_KEY&libraries=places&callback=initAutoplete"
         async defer></script


<% end %>

Error

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

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./maps/api/js.erb?key=<%= ENV['MAPS_API_KEY'] %>&libraries=places&callback=initAutoplete"
         async defer></script

• javascript
• ruby-on-rails
• figaro-ruby

Share Improve this question Follow edited Apr 5, 2016 at 0:56 halfacreyum asked Apr 5, 2016 at 0:21 halfacreyumhalfacreyum 29755 silver badges1616 bronze badges 1

• Show us the code you're using to generate the page. – Greg Borbonus Commented Apr 5, 2016 at 0:26

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

This worked for me:

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

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

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

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

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

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./maps/api/js?key=${GOOGLE_MAP_API}`
    }
  </script>
</div>

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

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>