gmaps4rails v2 migration... where is everything? (especially sidebar)

Question

We have a nice Rails app working using the old gmaps4rails. I've finally gotten around to trying to update to the new v2 and it seems that it is poorly documented and missing features.

Sidebars

Where has sidebars gone? There is no reference to it in the source or examples. Before, in my controller, I had marker.sidebar "#{shop.name} - #{shop.location}". That throws an exception.

Options

I think this stuff is in there, but there are no examples anymore. How to recreate what this did:

    <%= gmaps( "map_options" => {   
                    "auto_adjust" => false, 
                    "auto_zoom" => false, 
                    "zoom" => 6, 
                    "bounds" => '[{"lat": 54, "lng": 6 }, {"lat": 48 , "lng": 15 }]'
                },
                "markers" => { 
                    "data" => @json, 
                    "options" => {"list_container" => "markers_list", "randomize" => false, "max_random_distance" => 10000 } 
                }) %>

I can figure out zoom but everything else seems vastly different.

Answer 1

An example to get your sidebar back with clean js:

  @hash = Gmaps4rails.build_markers(@shops) do |shop, marker|
    marker.lat shop.latitude
    marker.lng shop.longitude
    marker.title shop.name
    marker.json({
      id:       shop.id,
      country:  "random",
      name:     shop.name,
      location: shop.location
    })
  end

  $(document).ready(function(){
    var raw_markers   = <%=raw @hash.to_json %>;
    var gmaps_markers;

    function createSidebarLi(shop_json) {
      return ("<li><a>" + shop_json.name + " - " + shop_json.location + "<\/a></li>");
    };

    function bindLiToMarker($li, marker){
      $li.click(function(){
        marker.panTo(); //to pan to the marker
        google.maps.event.trigger(marker.getServiceObject(), "click"); // to open infowindow
      });
    };

    function createSidebar(){
      for (var i=0;i<raw_markers.length;i++){
        var $li = $( createSidebarLi(raw_markers[i]) );
        $li.appendTo($('#markers_list'));
        bindLiToMarker($li, gmaps_markers[i]);
      }
    };

    handler = Gmaps.build('Google', {markers: { maxRandomDistance: 10000} });
    handler.buildMap({ provider: {zoom: 6}, internal: {id: 'map'}}, function(){
      gmaps_markers = handler.addMarkers(raw_markers);
      handler.map.centerOn({ lat: 51, lng: 11 });
      createSidebar();
    });
  });