In this short post I’ll tell how I made Google-Maps-for-Rails be able to work with ActiveAdmin.

Let’s asume you have a working configured Rails 3.2, MongoDB and ActiveAdmin.

First you need to install gem - gem 'gmaps4rails', then run rails g gmaps4rails:install

Let’s add maps for our model object Shop.

class Shop
  include Mongoid::Document
  include Mongoid::Timestamps
  include Mongoid::Spacial::Document

  field :location, :type => Array, :spacial => {:lat => :lat, :lng => :lng, :return_array => true }
  index [[:location, Mongo::GEO2D]], :min => -180, :max => 180, :bits => 24, :background => true

We need to change it a bit and add this things:

  include Gmaps4rails::ActsAsGmappable
  acts_as_gmappable :process_geocoding => false

  def latitude

  def longitude

Now let’s edit our app/admin/shops.rb

    show :title => proc{ "#{ if} / #{}" } do
    attributes_table do
      row :name
      row(:location) {|o| gmaps("markers" => {data: o.to_gmaps4rails}, "map_options" =>  { auto_zoom: false, zoom: 15 }) }
      row :address
      row :description
      row :created_at
      row :updated_at

If we will try to test it - we won’t see a map, because ActiveAdmin is not auto loading our scripts and styles. So let’s try fix that.

First, we need to add gmaps4rails css & javascript files for loading.


@import "gmaps4rails";


//= require gmaps4rails/gmaps4rails.base
//= require gmaps4rails/gmaps4rails.googlemaps

Now, we need to make custom view for out maps, that will also load google-map javascript. Create file app/views/gmaps4rails/_gmaps4rails.html.erb With contents:

<script type="text/javascript" src=''></script>
<script type="text/javascript" src=''></script>

 <% case dom.map_provider %>
<% when "mapquest" %>
<div id="<%= dom.map_id %>" style="width:750px; height:475px;">

<% when "bing" %>
  <div id="<%= dom.map_id %>" class="<%= dom.map_class %>"></div>
<% else %>
<div class="<%= dom.container_class %>">
  <div id="<%= dom.map_id %>" class="<%= dom.map_class %>"></div>
<% end %>

<script type="text/javascript" charset="utf-8">
 <%=raw options.to_gmaps4rails %>

Now if we test showing our model in ActiveAdmin, we will see a nice map. But let’s add few more things. Edit your Shop model again and add this code:

  def gmaps4rails_title

  def gmaps4rails_infowindow
    "<b>#{}</b><br /><i>#{self.description}</i><br /><br />#{self.address}<br /><i>#{self.location.join(', ')}</i>"

Now our markers will be clickable and will show nice info window.