Google Maps for Rails - Marker mit AJAX @ aktualisier
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.
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 %>");