Google Maps for Rails: actualizar marcadores con AJAX
Estoy trabajando en una aplicación web y uso Ruby on Rails. Nuestro índice está compuesto por un mapa y un campo de búsqueda. Puede buscar una ubicación y el mapa actualiza sus marcadores.
Me gustaría usar Ajax para evitar actualizar la página. Entonces agreguéremote: true
a la forma, unrespond_to
en el controlador y un nuevosearch.js.erb.
Misearch.js.erb
hace un parcial_googlemap.erb
que contiene el script para inicializar el mapa.
Aquí está mi problema. Como el mapa ya existe, es como si quisiera crear el mismo objeto dos veces, lo que por supuesto no funciona y es horrible. Me gustaría actualizar solo los marcadores en el mapa con otros nuevos. Pero no puedo encontrar una manera de hacerlo.
Vi que la versión anterior de Gmaps4rails integraba una forma de hacerlo (Gmaps.map.replaceMarkers(your_markers_json_array);
) pero no parece funcionar ahora. Cuando lo uso, aparece este error: "TypeError: Gmaps.map is undefined
". Lo intenté con"handler.replaceMarkers();
"pero esta vez tengo"TypeError: handler.replaceMarkers is not a function
".
Soy nuevo en Javascript y en Rails, pero quiero mejorar mi conocimiento y realmente necesito continuar con el resto de esta aplicación web. He estado buscando una solución en todas partes en Internet pero en vano.
Por favor, ¿alguien podría decirme cómo podría hacer eso y qué estoy haciendo mal?
Muchas gracias de antemano,
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 %>");