Search code examples
ruby-on-railsgoogle-mapsdraggablegmaps4rails

gmaps4rails v2.0.3 - Gmaps.map is undefined


I am trying to implement the marker dragging functionality using Gmaps4rails gem following this example but I'm having problems wusing "Gmaps.map" object that is undefined and I'm not able to add a callback for the map to handle draggable markers.

Right now the map is displaying correctly but I'm stuck on the dragging part.

I am using 'gmaps4rails', '2.0.3'

I create the markers in the controller:

@locations = Location.all
@hash = Gmaps4rails.build_markers(@locations) do |location, marker|
  marker.lat location.latitude
  marker.lng location.longitude
end

In the view:

= content_for :scripts do
  = javascript_include_tag "//maps.google.com/maps/api/js?v=3.13&sensor=false&libraries=geometry"
  = javascript_include_tag '//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js'
  = javascript_include_tag "/assets/custom_scripts/map_scripts.js"

%div{ :style => 'width: 800px;' }
#map{ :style => 'width: 800px; height: 400px;' }

:javascript
  createMap(#{raw @hash.to_json });

In the JS:

function createMap(items){
  var handler = Gmaps.build('Google');
  handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
    markers = handler.addMarkers(items);
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
  });
}

I am not sure if this documentation is outdated because they are still using

<%= gmaps("markers" => {"data" => @json, "options" => { "draggable" => true  } } ) %> 

and I read that the "gmap" function is not being used anymore on Gmaps4rails v2


Solution

  • Map objects are now attached to the handler.

    • handler.map retrieves the js proxy object the gem builds to handle the map and that you can customize
    • handler.getMap() retrieves the google map object
    • handler.map.getServiceObject() is the norm to get google object from proxy objects

    The callback is now the function you pass in buildMap.

    You have all markers in your markers var. They follow the norm so you can access the google marker object doing: markers[0].getServiceObject()

    If you want to pass options to your markers, add them as a second argument:

    handler.addMarkers(items, options);
    

    Documentation is in the code, within builders, see here