Ich arbeite an einer Web-App und verwende Ruby on Rails. Unser Index besteht aus einer Karte und einem Suchfeld. Sie können einen Ort suchen und die Karte aktualisiert seine Markierungen.

Ich möchte Ajax verwenden, um ein Aktualisieren der Seite zu vermeiden. Also habe ich @ hinzugefüremote: true zum Formular, einrespond_to im Controller und ein neuessearch.js.erb. Mysearch.js.erb rendert ein partielles_googlemap.erb enthält das Skript zum Initialisieren der Map.

Hier ist mein Problem. Da die Map bereits existiert, ist es so, als ob ich dasselbe Objekt zweimal erstellen wollte, was natürlich nicht funktioniert und furchtbar ist. Ich möchte nur Markierungen in der Karte mit neuen aktualisieren. Aber ich kann keinen Weg finden, das zu tun.

Ich sah die frühere Version von Gmaps4rails integriert einen Weg, um es zu tun Gmaps.map.replaceMarkers(your_markers_json_array);) aber es scheint jetzt nicht zu funktionieren. Wenn ich es benutze, erhalte ich folgenden Fehler: "TypeError: Gmaps.map is undefined ". Ich habe es mit"handler.replaceMarkers(); "aber diesmal habe ich"TypeError: handler.replaceMarkers is not a function ".

Ich bin neu in Javascript und Rails, aber ich möchte mein Wissen verbessern und muss den Rest dieser Web-App unbedingt fortsetzen. Ich habe überall im Internet nach einer Lösung gesucht, aber vergebens.

Live Website hier

Bitte, könnte mir jemand sagen, wie ich das machen könnte und was ich falsch mache?

Vielen Dank im Voraus

Céline

zones_controller.rb

def search
   respond_to do |format|
     format.html.none do
      search_params = params[:zone][:search]
         coordinates = Geocoder.coordinates(search_params).join(",")
         @zones = Zone.search(
           "", { "aroundLatLng" => coordinates, 
                  "aroundRadius" => 500000  #Searches around 500 km
                })
         if coordinates.nil?
           @zones = Zone.search(params[:search])
         elsif @zones.empty?
           @zones = Zone.all
           flash[:error] = "No zone could be found. Please try again."
         end
       build_map(@zones)
     end

     format.js
   end
end

def build_map(array)
  @hash = Gmaps4rails.build_markers(array) do |zone, marker|
    marker.lat zone.latitude
    marker.lng zone.longitude
    marker.json({ title: zone.description, id: zone.id })
    marker.infowindow render_to_string(:partial => "/zones/map_box", locals: { zone: zone })
  end
end

search.html.erb

    <div id="map" style='width: 100%; height: 700px;'>
</div>
  <!-- Beginning Google maps -->

<script type="text/javascript" id="map_script">
   $(document).ready(function() {
     <%= render 'googlemap', hash: @hash %>
   }); // Document ready
</script>

_googlemap.erb

handler = Gmaps.build('Google');
handler.buildMap({ provider: {
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  }, internal: {id: 'map'}
}, function(){
  markers_json = <%= raw hash.to_json %>;
  markers = _.map(markers_json, function(marker_json){

    marker = handler.addMarker(marker_json);
    handler.getMap().setZoom(4);

    _.extend(marker, marker_json);

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

    return marker;
  });

  handler.bounds.extendWith(markers);
  handler.fitMapToBounds();
});

search.js.erb

$('#map_script').replaceWith("<%= render 'googlemap', hash: @hash %>");