Google Maps v3 on Rails
Pull request Compare This branch is 31 commits ahead of parolkar:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



Cartographer generates painless Google Maps for your Rails application. It supports Google Maps API v3 & comes with all the goodies (MarkerManager && MarkerClusterer) for managing large number of markers with least effort.


  • Support for Google Maps v3 and v2
  • Drop-in-replacement for older version of cartographer (which only worked with google maps v2)
  • Support for MarkerManager v3
  • Support for MarkerClusterer v3
  • Support for AdSense for Maps (v3 only)
  • You can easily define custom icons for cluster
  • Works with Rails 3+ and also works on older rails versions to provide backward compatibility

How to use?

if you want to use google maps v3, set this constant as first line of environment.rb (this constant should be set before the plugins are loaded, its best to keep on first line)


In your controller...

  @map = 'map' )
  @map.zoom = :bound
  @map.icons <<
  marker1 => "taj_mahal", :marker_type => "Building",
              :position => [27.173006,78.042086],
              :info_window_url => "/url_for_info_content")
  marker2 => "raj_bhawan", :marker_type => "Building",
              :position => [28.614309,77.201353],
              :info_window_url => "/url_for_info_content")

@map.markers << marker1
@map.markers << marker2

In your view...

  # for Rails 3+ you need to make use of 'raw'
  # in the <head></head> tags:
  <%= raw %>
  # in the <body></body>:
  <%= raw @map.to_html %>
  <div style="width:600px;height:400px;" id="<%= @map.dom_id %>" > [Map] </div>

If your website is served on https, you'll need to switch on SSL in the header (API v3 only):

  <%= raw>true).to_s %>

Here is another example with custom icons + clustering

  #controller code
  @map = 'map' )
  @map.zoom = :bound
  @map.marker_clusterer = true

  icon_building = => "building_icon",
          :image_url => '/images/icon.gif',
          :width => 31,
          :height => 24,
          :anchor_x => 0,
          :anchor_y => 20,
          :info_anchor_x => 5,
          :info_anchor_x => 1)

  building_cluster_icon ={:marker_type => "Building"})
  #Clustering requires various variant of icon for different grouping/zoom level
  #push first variant
  building_cluster_icon << {
                 :url => '/images/small_icon.gif',
                 :height => 33,
                 :width => 58,
                 :opt_anchor => [10, 0],
                 :opt_textColor => 'black'
  #push second variant
  building_cluster_icon << {
                 :url => '/images/bigger_icon.gif',
                 :height => 63,
                  :width => 98,
                 :opt_anchor => [20, 0],
                 :opt_textColor => 'black'

  #push third variant
  building_cluster_icon << {
                 :url => '/images/biggest_icon.gif',
                 :height => 73,
                 :width => 118,
                 :opt_anchor => [26, 0],
                 :opt_textColor => 'black'

  @map.marker_clusterer_icons = [building_cluster_icon]

  marker1 => "taj_mahal", :marker_type => "Building",
              :position => [27.173006,78.042086],
              :info_window_url => "/url_for_info_content",
              :icon => icon_building)
  marker2 => "raj_bhawan", :marker_type => "Building",
              :position => [28.614309,77.201353],
              :info_window_url => "/url_for_info_content",
              :icon => icon_building)

  @map.markers << marker1
  @map.markers << marker2

Adsense for Maps

To use Google AdSense for Maps with Cartographer you need to define an ad object in Cartographer::Gad.

For example, for a map defined as @map in your controller, you would use: =
    :format       => "SKYSCRAPER",
    :div          => "div",
    :position     => "RIGHT_TOP",
    :map          => "map",
    :visible      => true,
    :publisher_id => "YOUR_PUBLISHER_ID"
  • Make sure you replace "YOUR_PUBLISHER_ID" with your AdSense publisher ID.
  • The different formats that the ad can be are defined here.
  • The different positions the ad can be placed on the map are defined here.

Labels for Markers

There is a simple support added for the MarkerWithLabel utility class. Cartographer::Gmaker accepts a label parameter. In case when label is used, the MarkerWithLabel class is used for marker instead of the google.maps.Marker class.


  marker =
    :name=> "marker_1", :marker_type => "Building",
    :position => [location.latitude,location.longitude],
    :icon => @icon,
    :label => {
      :content => 'Marker Label',
      :class => "marker_label",
      :anchor => 'new google.maps.Point(22, 0)'

When markers with label are used, the markerwithlabel utility library has to be loaded.


You can install either with the rails plugin command or by git submoduling it into your vendor/plugins directory. Note that with the latter, your deploy process needs to initialize and update git submodules; this is not the case by default on Heroku.

  cd rails_app
  rails plugin install git://


  git clone git:// vendor/plugins/cartographer


Announcement of Cartographer's new avatar on Ruby5 Podcast :

Original Rails blog announcement of 2005 is at

Copyright (c) 2011 Abhishek Parolkar & Joshua Miller, released under the MIT license