Wenn mehrere Google Maps auf der gleichen Seite, klicken Sie auf einen Marker markiert unteren

Question

Zunächst einmal, ich habe kein Problem, die Karten korrekt angezeigt, und die Marker sind, wo sie auf der Karte sein müssen. Mein Problem ist, wenn ich mehrere Karten für einen Zustand gezeigt habe, wenn Sie auf die Markierung klicken, um das infowindow auf irgendeiner Karte anzuzeigen, erscheint die contentString für die unterste Karte. Hier

ist der Code Anzeigen der Karte (n) auf der Seite:

<% @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 %> 

Hier wird die 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 

Vielen Dank für alle Hilfe Jungs!

Answer 1

Es stellte sich heraus, dass es einfach war: map ist eine globale Variable und bezieht sich auf die letzte Karte, die definiert wird, wenn das click -Ereignis das Info-Fenster öffnet. Wenn Sie die initMap-Funktion für die lokale Zuordnung verwenden, sieht es so aus, als ob sie funktionieren sollte.