gmaps4rails this.clusterer is undefined in this.clusterer.addMarker(marker);

Question

I receive the error this.clusterer is undefined. You can see my configuration below.

Expected behaviour: Load the Page, than AJAX-load the Markers from the controller using the query defined in #search_form. Finally add the markers to the #map and cluster them.

my js.coffee

$ ->
  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)  # <<--- here is the error

  $("#search_form").submit (e) ->
    valuesToSubmit = $(this).serialize
    $.ajax({
      url: $(this).attr("action"),
      data: valuesToSubmit,
      success: placeMarkers,
      dataType: 'json'
    })
    e.preventDefault

  $("#search_form").submit()

And 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

Answer 1

Very strange, I can't reproduce it any more...

I think the change was to add the $("#search_form").submit() to the onMapLoad handler.

$ ->
  handler = Gmaps.build('Google');
  handler.buildMap { provider: {center: new google.maps.LatLng(49.639177, 9.536133),zoom: 6}, internal: {id: 'map'}},
    ()->
      $("#search_form").submit()

Thank you for your hint @apneadiving

Answer 2

Had the same issues recently. Basically what @apneadiving was suggesting: it is a timing issue when ajax calls are done before the callback handler of buildMap has finished.

Solution: Either one starts ajax calls only from inside of the callback handler (aka serialized) or what I like more: using callbacks through setTimeout from within your ajax response. This should make your app more responsive as calls and processing can be done more in parallel.