I'm encountering an error message that says this.clusterer is undefined. Below is an overview of my configuration.
Expected behavior: The page should load, then AJAX-load the markers from the controller using the query defined in #search_form. Finally, the markers should be added to the #map and clustered.
This is my js.coffee file:
$ ->
handler = Gmaps.build('Google');
handler.buildMap { provider: {center: new google.maps.LatLng(49.639177, 9.536133),zoom: 6}, internal: {id: 'map'}},
()->
handler._createClusterer()
markers = []
placeMarkers = (data, textStatus, jqXHR) ->
handler.removeMarkers(markers);
markers = handler.addMarkers(data) # <<--- error occurs here
$("#search_form").submit (e) ->
valuesToSubmit = $(this).serialize
$.ajax({
url: $(this).attr("action"),
data: valuesToSubmit,
success: placeMarkers,
dataType: 'json'
})
e.preventDefault
$("#search_form").submit()
And this is the Controller:
def index
respond_to do |format|
format.html {}
format.json {
seminars = Seminar.search(params[:search])
@markers = Gmaps4rails.build_markers(seminars) do |seminar, marker|
return if seminar.location.is_a? String
marker.lat seminar.location.lat
marker.lng seminar.location.lon
marker.infowindow render_to_string(:partial => 'seminars/seminar.html.haml', :locals => {seminar: seminar})
marker.title seminar.course.title
marker.json({ :id => seminar.id })
end
render json: @markers
}
end
end
And the response from the controller:
[{"lat":52.517,"lng":13.3889,"marker_title":"Title1","id":1},
{"lat":51.5114,"lng":7.46517,"marker_title":"Title2","id":3}]
Here is the stacktrace:
Gmaps.Objects.Handler.Handler.addMarker (application.js:22417)
(anonymous function) (application.js:22409)
_.map._.collect (application.js:21094)
Gmaps.Objects.Handler.Handler.addMarkers (application.js:22408)
placeMarkers (application.js:23263)
jQuery.Callbacks.fire (application.js:3049)
jQuery.Callbacks.self.fireWith (application.js:3161)
done (application.js:8236)
jQuery.ajaxTransport.send.callback (application.js:8779)
Version: gmaps4rails-2.1.1