Javascript 如果同一页面上有多个谷歌地图，单击任何标记将高亮显示最底部的地图标记

首先，让地图正确显示并不是我的问题，标记是地图上需要的位置。我的问题是，当我为一个状态显示了多个映射时，如果单击标记在任何映射上显示

infowindow

，则最底部的映射会弹出

contentString

以下是在页面上显示地图的代码：

<% @showrooms_nearby.each do |showroom| %>
      <% address_url = "" %>
      <div class="row showroom-results">
        <div class="col-md-8">
          <div id="<%= showroom.id %>" style="height:400px; width:100%; clear:both;"></div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <div class="card-block">
              <h4 class="card-title"><%= showroom.name %></h4>
              <div class="showroom-info showroom-address">
                <% if showroom.design_center %>
                  <% address_url = address_url + " #{showroom.design_center}" %>
                  <%= showroom.design_center %> <br>
                <% end %>
                <% if showroom.address1 %>
                  <% address_url = address_url + " #{showroom.address1}" %>
                  <%= showroom.address1 %> <br>
                <% end %>
                <% if showroom.address2 %>
                  <% address_url = address_url + " #{showroom.address2}" %>
                  <%= showroom.address2 %> <br>
                <% end %>
                <% if showroom.address3 %>
                  <% address_url = address_url + " #{showroom.address3}" %>
                  <%= showroom.address3 %> <br>
                <% end %>
                <% if showroom.city %>
                  <% address_url = address_url + " #{showroom.city}" %>
                  <%= showroom.city %>,&nbsp;
                <% end %>
                <% if showroom.state %>
                  <% address_url = address_url + " #{showroom.state}" %>
                  <%= showroom.state %>&nbsp;&nbsp;
                <% end %>
                <% if showroom.zip %>
                  <% address_url = address_url + " #{showroom.zip}" %>
                  <%= showroom.zip %> <br>
                <% end %>
                <% if showroom.country != 'US' %>
                  <% address_url = address_url + " #{showroom.country}" %>
                  <% showroom.country %> <br>
                <% end %>
              </div>
              <div class="showroom-info showroom-contact">
                <% if showroom.phone %>
                  Phone: <%= showroom.phone %> <br>
                <% end %>
                <% if showroom.fax %>
                  Fax: <%= showroom.fax %> <br>
                <% end %>
                <% if showroom.email %>
                  <%= mail_to showroom.email %> <br>
                <% end %>
                <% if showroom.website %>
                  <%= link_to showroom.website %> <br>
                <% end %>
              </div>
              <div class="showroom-info showroom-brands">
                <% if showroom.brands %>
                  Brands:<br>
                  <% brand_sort(showroom.brands).each_with_index do |brand, index| %>
                    <% if index == showroom.brands.size - 1 %>
                      <%= brand_pretty(brand) %>&nbsp;
                    <% else %>
                      <%= brand_pretty(brand) %>,
                    <% end %>
                  <% end %>
                <% end %>
              </div>
              <div class="showroom-info showroom-links">
                <a href="https://maps.google.com?daddr=<%= address_url.parameterize.gsub('-', '+') %>" target="_blank">Get Directions</a>
              </div>
              <script>$(window).load(function() {initMap('<%= showroom.id %>', <%= showroom.latitude %>, <%= showroom.longitude %>);});</script>
            </div>
          </div>
        </div>
      </div>
      <hr class="showroom-divider">
    <% end %>

showroom.js：

function displayShowrooms(country, state, stateName) {

  var jShowroomHeader = $("span.showroom-location");
  var jShowroomWrapper = $("div.showroom-wrapper");

  if (jShowroomWrapper.length) {
    if (country == 'US') {
      var strURI_Showrooms = ("/showrooms/" + country + "/" + state);
    } else {
      var strURI_Showrooms = ("/showrooms/" + country);
    }


    $.ajax(strURI_Showrooms, {
      method : "GET",
      async  : true ,
      cache  : false,
      timeout: 5000 ,
      headers: { "X-CSRF-Token": $("meta[name=csrf-token]").prop("content") }
    }) // [ajax, get list of showrooms matching our selection]

      .done(function (objData) {
        jShowroomHeader.empty().append("Showrooms in " + stateName);
        jShowroomWrapper.empty();

        if (objData.length) {
          $.each(objData, function(index, showroom) {
            jShowroomWrapper.append(" \
              <div class='row' id='showroom-result-" + showroom.id + "'> \
                <div class='col-md-8'> \
                  <div id='"+ showroom.id +"' style='height:400px; width:100%; clear:both;'></div> \
                </div> \
                <div class='col-md-4'> \
                  <div class='card'> \
                    <div class='card-block'> \
                      <h4 class='card-title'>" + showroom.name +"</h4> \
                      <a class='showroomAddressLink' target='_blank'>  \
                      <div class='showroom-info showroom-address'> \
                      </div> \
                      </a> \
                      <div class='showroom-info showroom-contact'> \
                      </div> \
                      <div class='showroom-info showroom-brands'> \
                        Brands:<br> \
                      </div> \
                      <div class='showroom-info showroom-links'> \
                      </div> \
                    </div> \
                  </div> \
                </div> \
              </div> \
              <hr class='showroom-divider'> \
              ");
            var jShowroomResult = jShowroomWrapper.find('#showroom-result-'+showroom.id);
            var address_url = showroom.name;
            if (showroom.design_center != null) {
              jShowroomResult.find('.showroom-address').append(showroom.design_center + "<br>");
              address_url += " " + showroom.design_center;
            }
            if (showroom.address1 != null) {
              jShowroomResult.find('.showroom-address').append(showroom.address1 + "<br>");
              address_url += " " + showroom.address1;
            }
            if (showroom.address2 != null) {
              jShowroomResult.find('.showroom-address').append(showroom.address2 + "<br>");
              address_url += " " + showroom.address2;
            }
            if (showroom.address3 != null) {
              jShowroomResult.find('.showroom-address').append(showroom.address3 + "<br>");
              address_url += " " + showroom.address3;
            }
            if (showroom.city != null) {
              jShowroomResult.find('.showroom-address').append(showroom.city + ",&nbsp;");
              address_url += " " + showroom.city;
            }
            if (showroom.state != null) {
              jShowroomResult.find('.showroom-address').append(showroom.state + "&nbsp;&nbsp;");
              address_url += " " + showroom.state;
            }
            if (showroom.zip != null) {
              jShowroomResult.find('.showroom-address').append(showroom.zip + "<br>");
              address_url += " " + showroom.zip;
            }
            if (showroom.country != null && showroom.country != 'US') {
              jShowroomResult.find('.showroom-address').append(showroom.country + "<br>");
              address_url += " " + showroom.country;
            }
            if (showroom.phone != null) {
              jShowroomResult.find('.showroom-contact').append("Phone: " + "<a href='tel:'" + showroom.phone + ">" + showroom.phone + "</a>" + "<br>");
            }
            if (showroom.fax != null) {
              jShowroomResult.find('.showroom-contact').append("Fax: " + showroom.fax + "<br>");
            }
            if (showroom.email != null) {
              jShowroomResult.find('.showroom-contact').append("<a href='mailto:" + showroom.email + "'>" + showroom.email + "<br>");
            }
            if (showroom.website != null) {
              jShowroomResult.find('.showroom-contact').append("<a href='" + showroom.website + "' target='_blank'>" + showroom.website + "<br>");
            }
            if (showroom.brands != null) {
              $.each(showroom.brands, function (i, brand) {
                if (i == (showroom.brands.length - 1)) {
                  jShowroomResult.find('.showroom-brands').append(brand);
                } else {
                  jShowroomResult.find('.showroom-brands').append(brand + ",&nbsp;")
                }
              });
            }

            jShowroomResult.find('.showroomAddressLink').attr("href", "https://maps.google.com/?q="+address_url.toLowerCase().replace(/[^a-z0-9]+/g,'+').replace(/(^-|-$)/g,''))

            initMap(showroom.id, showroom.latitude, showroom.longitude);
          }); // for [every showroom]
        } // if [we have showrooms]
        else {
          jShowroomWrapper.append("<div class='row showroom-results'><div class='col-md-12 center'>No showrooms are located in " + stateName + ". Please search another location or call (555) 555-5555 for assistance.</div>")
        }
      })
  } 
}

功能显示展厅（国家、州、州名）{
var jShowroomHeader=$（“span.展厅位置”）；
var jShowroomWrapper=$（“div.showroom-wrapper”）；
if（jShowroomWrapper.length）{
如果（国家=‘美国’）{
var strURI_展厅=（“/展厅/“+国家+”/“+州）；
}否则{
var strURI_展厅=（“/展厅/”+国家）；
}
$.ajax（strURI_展厅{
方法：“获取”，
async:true，
cache:false，
超时：5000，
标题：{“X-CSRF-Token”：$（“meta[name=CSRF-Token]”）prop（“content”）}
})//[ajax，获取与我们的选择相匹配的展厅列表]
.done（函数（objData）{
jShowroomHeader.empty（）.append（“Showrooms in”+stateName）；
jShowroomWrapper.empty（）；
if（objData.length）{
$。每个（对象数据、功能（索引、展厅）{
jShowroomWrapper.append（“\
\
\
\
\
\
\
\
“+showroom.name+”\
“+”
”；
}
如果（showroom.fax！=null）{
jShowroomResult.find（“.showroom contact”）.append（“传真：“+showroom.Fax+”
”）；
}
如果（showroom.email！=null）{
jShowroomResult.find（“.showroom contact”）.append（“+showroom.email+”
”）；
}
如果（showroom.website！=null）{
jShowroomResult.find（“.showroom contact”）.append（“+showroom.website+”
”）；
}
if（showroom.brands！=null）{
美元。每个（展厅。品牌，功能（i，品牌）{
如果（i==（showroom.brands.length-1））{
jShowroomResult.find（“.showroom brands”）.append（brand）；
}否则{
jShowroomResult.find（“.showroom brands”）.append（brand+”，“”）
}
});
}
jShowroomResult.find（'.showroomAddressLink'）.attr（“href”，”https://maps.google.com/?q=“+address_url.toLowerCase（）。替换（/[^a-z0-9]+//g，“+”）。替换（/（^-|-$）/g，”）
initMap（showroom.id、showroom.latitude、showroom.longitude）；
})；//对于[每个陈列室]
}//如果[我们有陈列室]
否则{
jShowroomWrapper.append（“没有展厅位于“+stateName+”。请搜索其他位置或致电（555）555-5555寻求帮助。”）
}
})
} 
}

展厅_controller.rb：

class ShowroomsController < ApplicationController
  def landing
    lat = location.latitude
    lon = location.longitude
    @distance = 50
    @user_location = [lat, lon]
    @showrooms = Showroom.all.where('? = ANY (brands)', brand(request)).order('id ASC')
    @showrooms_nearby = @showrooms.near(@user_location, @distance)
  end

  def search
    @showrooms = if params[:state]
                   Showroom.where(country: params[:country].upcase, state: params[:state].upcase)
                 else
                   Showroom.where(country: params[:country].upcase)
                 end

    @showrooms.each do |showroom|
      showroom.brands = brand_sort(showroom.brands)
      showroom.brands.collect! { |brand|
        (brand == 'brand1') ? 'Brand1' :
        (brand == 'brand2') ? 'Brand2' :
        (brand == 'brand3') ? 'Brand3' :
        (brand == 'brand4') ? 'Brand4' :
        (brand == 'brand5') ? 'Brand5' :
        (brand == 'brand6') ? 'Brand6' : brand
      }

    end

    render json: @showrooms
  end
end

class ShowroomsController

---

谢谢你们的帮助

结果很简单：map是一个全局变量，因此将引用单击事件打开信息窗口时定义的最后一个map。如果将map设置为initMap函数的本地，它看起来应该可以工作。

请显示为每个展厅调用initMap（）的Javascript代码，以及初始化展厅Javascript数组的Ruby代码。无论绑定视图和动态行为需要什么样的代码。Michael，我已经添加了showroom.js和showroom_controller.rb。谢谢你看这个，谢谢！我不得不添加

myLatLong

、

map

、

infowindow

和

marker

作为局部变量。现在它的工作原理和它应该的一样。

class ShowroomsController < ApplicationController
  def landing
    lat = location.latitude
    lon = location.longitude
    @distance = 50
    @user_location = [lat, lon]
    @showrooms = Showroom.all.where('? = ANY (brands)', brand(request)).order('id ASC')
    @showrooms_nearby = @showrooms.near(@user_location, @distance)
  end

  def search
    @showrooms = if params[:state]
                   Showroom.where(country: params[:country].upcase, state: params[:state].upcase)
                 else
                   Showroom.where(country: params[:country].upcase)
                 end

    @showrooms.each do |showroom|
      showroom.brands = brand_sort(showroom.brands)
      showroom.brands.collect! { |brand|
        (brand == 'brand1') ? 'Brand1' :
        (brand == 'brand2') ? 'Brand2' :
        (brand == 'brand3') ? 'Brand3' :
        (brand == 'brand4') ? 'Brand4' :
        (brand == 'brand5') ? 'Brand5' :
        (brand == 'brand6') ? 'Brand6' : brand
      }

    end

    render json: @showrooms
  end
end