如果在同一頁面上顯示多個Google地圖，點擊任何標記都會突出顯示最底部的地圖標記

Question

首先，我沒有讓地圖正確顯示的問題，並且標記是他們需要在地圖上顯示的位置。我的問題是，當我爲某個州顯示多個地圖時，如果單擊標記以在任何地圖上顯示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 

感謝您的幫助！

Answer 1

事實證明這很簡單：map是一個全局變量，因此將引用click事件打開信息窗口時定義的最後一個地圖。如果您將map映射到initMap函數本地，它看起來應該起作用。