Google Maps for Rails - atualize marcadores com AJAX
Estou trabalhando em um aplicativo Web e uso o Ruby on Rails. Nosso índice é feito de um mapa e de um campo de pesquisa. Você pode pesquisar um local e o mapa atualiza seus marcadores.
Eu gostaria de usar o Ajax para evitar atualizar a página. Então eu adicioneiremote: true
para o formulário, umrespond_to
no controlador e um novosearch.js.erb.
Minhassearch.js.erb
processa uma parcial_googlemap.erb
que contém o script para inicializar o mapa.
Aqui está o meu problema. Como o mapa já existe, é como se eu quisesse criar o mesmo objeto duas vezes, o que obviamente não funciona e é horrível. Gostaria de atualizar apenas marcadores no mapa com novos. Mas não consigo encontrar uma maneira de fazer isso.
Vi a versão anterior do Gmaps4rails integrando uma maneira de fazê-lo (Gmaps.map.replaceMarkers(your_markers_json_array);
) mas parece não funcionar agora. Quando o uso, recebi este erro: "TypeError: Gmaps.map is undefined
". Eu tentei com"handler.replaceMarkers();
"mas desta vez eu tenho"TypeError: handler.replaceMarkers is not a function
"
Eu sou novo no Javascript e no Rails, mas quero aprimorar meu conhecimento e realmente preciso continuar com o restante deste aplicativo da web. Eu tenho procurado uma solução em todos os lugares na internet, mas em vão.
Por favor, alguém poderia me dizer como eu poderia fazer isso e o que estou fazendo de errado?
Muito obrigado antecipadamente,
Céline
areas_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 %>");