如果同一页面上的多个Google地图,则单击任何标记会突出显示最底部的地图标记

时间:2016-05-11 15:43:00

标签: javascript ruby google-maps ruby-on-rails-4 google-maps-api-3

首先,我没有问题让地图正确显示,标记是他们需要在地图上的位置。我的问题是当我为州显示多个地图时,如果您点击标记以在任何地图上显示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 %>

这是maps.js.erb:

var map;
function initMap(id, lat, lng) {
  myLatLng = {lat: lat, lng: lng};

  contentString = "Brand Showroom";

  map = new google.maps.Map(document.getElementById(id), {
    center: myLatLng,
    zoom: 15
  });

  infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  marker = new google.maps.Marker({
    position: myLatLng,
    map: map
  });

  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}

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>")
        }
      })
  } 
}

showroom_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

感谢所有帮助人员!

1 个答案:

答案 0 :(得分:1)

事实证明这很简单:map是一个全局变量,因此将引用click事件打开信息窗口时定义的最后一个map。如果你将map本地化为initMap函数,它看起来应该可以工作。