Home>

I want to display Google Map in a production environment.

Google Map is displayed in the development environment, and you can also search for routes.
In the production environment, for deveropment purpose only is displayed.
You have already registered your payee in your Google platform account.
The billing account status is also enabled.
You can see "Billing Accounts" in the billing accounts linked to this project.

You are using this API without a key. See https://developers.google.com/maps/documentation/javascript/error-messages?utm_source=maps_js&utm_medium=degraded&utm_campaign=billing#api-key-and-billing-errors
Corresponding source code
% script {src: "https://maps.google.com/maps/api/js?key=#{ENV['GOOGLE_MAP_API_KEY']}", charset:'utf-8'}
= javascript_include_tag'search'
.search
  .search__wrapper
    .search__wrapper__title
      % h1
        Route search
      .search__wrapper__title__return
        = link_to root_path do
          Home
    .search__wrapper__contents
      .search__wrapper__contents__origin
        % p
          Point of departure
        % input # origin {type:'textbox', value:'Kofu Station (Yamanashi)'}
      .search__wrapper__contents__destination
        % p
          Destination
        % input # destination {type:'textbox', value:'Yamanashishi Station (Yamanashi)'}
      .search__wrapper__contents__btn
        % input # searchBtn {type:'button', value:'search'}
    .map # map {style: "width: 100%;height: 600px;"}
$(function () {
  var directions;// Root instance
  var map;// Map instance
  var ds = google.maps.DirectionsStatus;// Root result status
  var directionsErr = new Array ();// Route result error message
  directionsErr [ds.INVALID_REQUEST] = "The specified DirectionsRequest is invalid.";
  directionsErr [ds.MAX_WAYPOINTS_EXCEEDED] = "Too many DirectionsWaypoints specified in DirectionsRequest. The maximum number of waypoints allowed is 8 plus the departure and arrival points.";
  directionsErr [ds.NOT_FOUND] = "At least one of the departure, arrival, and waypoints could not be geocoded.";
  directionsErr [ds.OVER_QUERY_LIMIT] = "Web page has exceeded the request limit in a short period of time.";
  directionsErr [ds.REQUEST_DENIED] = "The route service is not available for web pages.";
  directionsErr [ds.UNKNOWN_ERROR] = "The route request could not be processed due to a server error. Try again and it may be processed successfully.";
  directionsErr [ds.ZERO_RESULTS] = "Could not find a route between the departure and arrival points.";
  // Processing at Onload
  // Route generation
  directions = new google.maps.DirectionsService ();
  // Variables for initial settings used in Google Map
  var mapOptions = {
      zoom: 14, 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: new google.maps.LatLng (35.666674, 138.568785)
  };
  // Generate Google Map
  map = new google.maps.Map (document.getElementById ("map"), mapOptions);
  // [Search] button processing
  $('# searchBtn'). click (function (searchRoute) {
  // Get the departure/arrival of the search from the text box
  var origin = document.getElementById ("origin"). value;
  var destination = document.getElementById ("destination"). value;
  // Request a route search
  directions.route (
      {// Route request
        'origin': origin, // origin
        'destination': destination, // destination'travelMode': google.maps.DirectionsTravelMode.DRIVING // Route type: Car
      },


      function (results, status) {// root result callback function
        if (status == ds.OK) {// The result is OK ??
          // Generate a polyline (line) and display it on the map
          var poly = new google.maps.Polyline ({{
            map: map, // map
            path: results.routes [0] .overview_path, // Polyline coordinate column
            strokeWeight: 5, // Stroke width (in pixels)
            strokeColor: "# 0000EE", // Color of stroke in base format
            strokeOpacity: 0.5 // Stroke opacity (0.0-1.0)
          });
          // Central setting of search results
          map.setCenter (results.routes [0] .bounds.getCenter ());
        } else {
            // If the result is not OK
            alert ("Route search failed. Reason:" + directionsErr [status]);
        }
      });
    })
});
What I tried

・ Confirmation of billing account
-Changed the application limit to "None"
→ No change

Supplementary information (FW/tool version, etc.)

Rails 6.0.3.2
Deploy to Heroku
Please provide more detailed information here.

  • Answer # 1

    Heroku Preferences
    At the terminal

    heroku config: set GOOGLE_MAP_API_KEY = "[your API_KEY]"


    It was solved by.