Ruby on Rails应用中GoogleMaps API JS路线无法渲染问题求助

Hey there! Let's troubleshoot why your Google Maps route isn't rendering when you click the "查看路线" button in your Rails app—since it worked fine in the tutorials, it's probably a Rails-specific quirk or a small implementation oversight. Here are the most common fixes to check step by step:

1. Make sure the Google Maps API loads correctly in Rails #

Rails' asset pipeline and Turbolinks can sometimes interfere with script loading. Double-check that you're loading the API (with your key and the directions library) in your main layout file (like application.html.erb) instead of a partial that loads after your map initializes. A correct script tag looks like this:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=directions" async defer></script>

Also, avoid wrapping this script in any Rails helpers that might delay or block it.

2. Fix button click event binding for Turbolinks #

If your app uses Turbolinks (the default in Rails), the standard DOMContentLoaded event won't fire properly when navigating between pages. Replace it with turbolinks:load to ensure your map and click handler initialize every time the page loads:

document.addEventListener('turbolinks:load', function() {
  // Initialize map and directions objects
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const mapElement = document.getElementById('map');
  
  // Only proceed if the map element exists on the page
  if (!mapElement) return;

  const map = new google.maps.Map(mapElement, {
    center: { lat: 39.9042, lng: 116.4074 }, // Replace with your default coords
    zoom: 12
  });
  directionsRenderer.setMap(map);

  // Bind click event to your route button
  const routeBtn = document.getElementById('view-route-btn');
  if (routeBtn) {
    routeBtn.addEventListener('click', function() {
      const origin = document.getElementById('origin-input').value; // Match your input IDs
      const destination = document.getElementById('dest-input').value;

      directionsService.route({
        origin: origin,
        destination: destination,
        travelMode: google.maps.TravelMode.DRIVING
      }, function(response, status) {
        if (status === 'OK') {
          directionsRenderer.setDirections(response);
        } else {
          console.error('Route error:', status);
          alert('无法获取路线，请检查输入或API配置');
        }
      });
    });
  }
});

Pro tip: Double-check that your button's id in HTML matches the selector in your JS (no typos! That's a super common mistake).

3. Ensure your map element has explicit dimensions #

If your map div doesn't have a defined height, it might collapse to 0 pixels, making it look like the route isn't rendering. Add this to your CSS (either in application.css or a component-specific stylesheet):

#map {
  height: 400px;
  width: 100%;
  min-height: 400px;
  /* Don't use height: 100% unless its parent container also has a set height */
}

Verify the styles are applied by checking your browser's DevTools → Elements tab—look for the #map element's computed styles.

4. Check API key and permissions #

Head to your Google Cloud Console and confirm:

• The Directions API is enabled for your project.
• Your API key has allowed referrers set correctly (for development, add http://localhost:3000/*; for production, add your app's domain).
• Open your browser's DevTools → Console tab to look for errors like "API key not valid" or "Directions API not enabled"—these will tell you exactly what's wrong.

5. Avoid Rails escaping your JavaScript #

If you're embedding JS directly in an ERB file, don't use the escape_javascript (or j) helper on your map initialization code—it can break the syntax. If you're using a separate JS file in app/assets/javascripts, make sure it's included in the asset pipeline by adding //= require your_map_script to application.js.

内容的提问来源于stack exchange，提问作者AChic