在Rails 7中如何通过Importmaps加载Google Maps？

核心思路 #

原来的script标签通过callback=initMap让Google Maps脚本加载完成后自动执行初始化函数，改用Importmaps后，我们可以去掉这个回调参数，通过手动监听页面加载事件或Stimulus控制器的生命周期钩子来触发initMap。

步骤1：配置Importmap引入Google Maps API #

在config/importmap.rb中添加Google Maps的CDN地址，替换成你的API密钥，同时移除callback参数：

pin "google-maps", to: "https://maps.googleapis.com/maps/api/js?key=#{Rails.application.credentials[:p10_google_maps_js_api_key]}", preload: true

步骤2：实现初始化逻辑并触发回调 #

方式一：普通JS模块 #

在app/javascript/下新建map.js文件，编写初始化函数并监听页面加载事件：

import "google-maps"

// 定义你的地图初始化函数
function initMap() {
  const mapElement = document.getElementById("map");
  if (!mapElement) return;

  new google.maps.Map(mapElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

// DOM加载完成后触发初始化
document.addEventListener("DOMContentLoaded", initMap);
// 适配Turbo导航，页面切换后重新初始化
document.addEventListener("turbo:load", initMap);

然后在视图或布局中导入这个模块：

<%= javascript_importmap_tags %>
<%= javascript_import_module_tag "map" %>

方式二：Stimulus控制器（推荐，符合Rails 7生态） #

1. 生成Stimulus控制器：

rails generate stimulus map

2. 在app/javascript/controllers/map_controller.js中编写逻辑：

import { Controller } from "@hotwired/stimulus"
import "google-maps"

export default class extends Controller {
  // 元素挂载到DOM时自动触发
  connect() {
    this.initMap()
  }

  initMap() {
    this.map = new google.maps.Map(this.element, {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
    })
  }
}

3. 在页面视图中使用控制器绑定地图容器：

<div data-controller="map" style="width: 100%; height: 400px;"></div>

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