我来帮你搞定这个动态加载地图标记的问题，有两种实用的方法，分别适合不同的场景，下面给你详细拆解：

方法一：在JS中嵌入Ruby代码（ERB模板方式） #

如果你的JS代码是放在Rails的ERB模板里（或者把JS文件改成.js.erb后缀），可以直接用Ruby从数据库拉取Location数据，生成标记对象，不用额外的请求。

步骤： #

1. 把你的JavaScript文件重命名为 map.js.erb（Rails会自动先解析文件里的Ruby代码，再输出纯JS）
2. 在文件里直接用Ruby查询Location模型，构建markersByRegion：

// map.js.erb
// 从数据库拉取爱荷华地区的所有Location记录
const markersByRegion = {
  iowa: [
    <% Location.where(region: 'iowa').each do |location| %>
      { 
        position: [<%= location.lat %>, <%= location.lng %>], 
        title: "<%= j location.title %>"  <!-- j是escape_javascript的简写，转义特殊字符避免JS语法错误 -->
      },
    <% end %>
  ]
};

app.regions = () => {
  function init() {
    startGoogleMap();
  }
  
  let startGoogleMap = () => {
    let map = new google.maps.Map(document.getElementById("region-banner"), {
      zoom: 3,
      minZoom: 3,
      // 你的其他地图配置
    });

    // 把标记添加到地图上
    markersByRegion.iowa.forEach(marker => {
      new google.maps.Marker({
        position: new google.maps.LatLng(...marker.position),
        title: marker.title,
        map: map
      });
    });
  };
  
  init();
};

优点：简单直接，页面加载时就把标记数据渲染好，不需要额外的HTTP请求；缺点：JS和Ruby代码耦合在一起，适合服务器渲染页面的场景。

方法二：通过AJAX异步获取数据（前后端分离风格） #

如果想保持JS代码的独立性，或者需要根据用户操作（比如切换地区）动态加载标记，用AJAX异步请求后端API是更好的选择。

步骤： #

1. 创建后端API接口
   先在Rails的控制器里写一个返回位置数据的动作：

   # app/controllers/locations_controller.rb
   class LocationsController < ApplicationController
     def index
       # 可以通过URL参数筛选地区，比如?region=iowa
       target_region = params[:region] || 'iowa'
       locations = Location.where(region: target_region)
       # 把数据转换成前端需要的格式，返回JSON
       render json: locations.map do |loc|
         { lat: loc.lat, lng: loc.lng, title: loc.title }
       end
     end
   end
   

   然后在路由里添加API路径：

   # config/routes.rb
   Rails.application.routes.draw do
     # 其他路由...
     get '/api/locations', to: 'locations#index'
   end
   

2. 前端用JS请求数据并生成标记
   在你的JS文件里用fetch API（或者jQuery）获取数据，动态创建标记：

   // map.js
   app.regions = () => {
     function init() {
       startGoogleMap();
     }
     
     // 用async/await处理异步请求
     let startGoogleMap = async () => {
       let map = new google.maps.Map(document.getElementById("region-banner"), {
         zoom: 3,
         minZoom: 3,
         // 你的其他地图配置
       });
   
       try {
         // 请求后端API获取爱荷华地区的位置数据
         const response = await fetch('/api/locations?region=iowa');
         const locations = await response.json();
   
         // 遍历数据创建标记
         locations.forEach(loc => {
           new google.maps.Marker({
             position: new google.maps.LatLng(loc.lat, loc.lng),
             title: loc.title,
             map: map
           });
         });
       } catch (error) {
         console.error('加载位置数据失败了:', error);
       }
     };
     
     init();
   };
   

优点：前后端代码解耦，支持动态更新（比如用户选择不同地区时，只需要修改请求参数重新拉数据）；缺点：需要额外的HTTP请求，适合交互性强的场景。

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