Gmaps4Rails - Client side rendering of infowindows

index.html.haml

// app/views/users/index.html.haml

= 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'

#map{style: "height: 400px;"}

:javascript
  window.load_google_map('map', #{@map_markers})

load_google_map.js.coffee

# app/assets/javascripts/load_google_map.js.coffee

class UserInfowindow extends Gmaps.Google.Builders.Marker
  user_infowindow_html: ->
    "<div>
      <div class='imgRounded'>
        <a href='#{@args.user_path}'><img alt='#{@args.username}' src='#{@args.user_avatar_path}'></a>
      </div>
      <h2>
        <a href='#{@args.user_path}'>#{@args.username}</a>
      </h2>
      <div>
        <a href='#{@args.user_path}'>See his profile
        <i class='glyphicon glyphicon-chevron-right'></i>
        </a>
      </div>
    </div>"

  create_infowindow: ->
    new(@primitives().infowindow)({content: @user_infowindow_html() })

window.load_google_map = (id, map_markers) ->
  handler = Gmaps.build 'Google', { builders: { Marker: UserInfowindow} }
  handler.buildMap { provider: {}, internal: {id: id} }, ->
    markers = handler.addMarkers(map_markers)
    handler.bounds.extendWith(markers)
    handler.fitMapToBounds()

users_controller.rb

# app/controllers/users_controller.rb

class UsersController < ApplicationController

  def index
    @map_markers = build_markers(User.geocoded)
  end

private
  
  def build_markers(users)
    Gmaps4rails.build_markers(users) do |user, marker|
      marker.lat          user.latitude
      marker.lng          user.longitude
      marker.json({
        user_path:        user_path(user),
        user_avatar_path: user.avatar.big.url,
        username:         user.username
      })
    end.to_json
  end
  
end