Google Maps для Rails - обновите маркеры с помощью AJAX
Я работаю над веб-приложением и использую Ruby on Rails. Наш индекс состоит из карты и поля поиска. Вы можете искать местоположение, и карта обновляет свои маркеры.
Я хотел бы использовать Ajax, чтобы избежать обновления страницы. Итак, я добавилremote: true
к форме, аrespond_to
в контроллере и новыйsearch.js.erb.
мойsearch.js.erb
оказывает частичное_googlemap.erb
который содержит скрипт для инициализации карты.
Здесь моя проблема. Поскольку карта уже существует, это как если бы я хотел создать один и тот же объект дважды, что, конечно, не работает и ужасно. Я хочу обновить только маркеры на карте новыми. Но я не могу найти способ сделать это.
Я видел, как прежняя версия Gmaps4rails интегрировала способ сделать это (Gmaps.map.replaceMarkers(your_markers_json_array);
) но сейчас это не похоже на работу. Когда я использую его, я получил эту ошибку:TypeError: Gmaps.map is undefined
". Я пытался с"handler.replaceMarkers();
"но на этот раз у меня есть"TypeError: handler.replaceMarkers is not a function
».
Я новичок в Javascript и в Rails, но я хочу улучшить свои знания, и мне действительно нужно продолжить с этим веб-приложением. Я искал решение везде в интернете, но тщетно.
Пожалуйста, кто-нибудь может сказать мне, как я могу это сделать и что я делаю неправильно?
Спасибо заранее,
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 %>");