Unobtrusive Gmaps w/ html5 data attributes and rails 3

_maps.sass

.gmap.map-preview
  :width 540px
  :height 400px
  :margin 5px auto
  :border 5px solid #DDD
  :background #F1F1F1 url('/images/map-placeholder.jpg') center center no-repeat

application_helper.rb

module ApplicationHelper

  def draw_map_of(address, options = {})
    use_google_maps_js
    lat, lng = address.lat, address.lng
    if lat.present? && lng.present?
      options[:class] = [options[:class].to_s.split(" "), "gmap"].join(" ").squeeze(" ")
      options["data-latitude"]  = lat
      options["data-longitude"] = lng
      marker_opts = options.delete(:marker) || {}
      marker_opts[:title] ||= address.to_s
      marker_opts.each_pair { |k, v| options["data-marker-#{k.to_s.gsub("_", "-")}"] = v }
      content_tag(:div, " ", options)
    end
  end
  
  def use_google_maps_js(sensor = false)
    unless defined?(@gmaps_used) && @gmaps_used
      js = javascript_include_tag("http://maps.google.com/maps/api/js?sensor=#{sensor}", "gmap")
      content_for(:extra_head, js)
      @gmaps_used = true
    end
  end

end

example.html.haml

-# anything that responds to .lat, .lng and .to_s; Make sure your layout
-# has `yield :extra_head` inside your head tag.
= draw_map_of some_address, :class => "map-preview"

gmap.js

var GMap = (function($) {
  var map              = {};
  var mapOptionKeys    = ["zoom", "title"];
  var markerOptionKeys = ["title"];
  
  // Map options
  map.count          = 0;
  map.autoIDPrefix   = "gmap-";
  map.maps           = [];
  map.defaultOptions = {
    zoom:      15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  
  function mergeOptionsWithData(element, options, keys, spacer) {
    if(!spacer) spacer = "";
    for(var i = 0; i < keys.length; i++) {
      var key = keys[i];
      var dataKey = "data-" + spacer + key;
      if(element.is("[" + dataKey + "]")) options[key] = element.attr(dataKey);
    }
  }
  
  function mapOptionsForElement(element) {
    var options = $.extend({}, map.defaultOptions);
    mergeOptionsWithData(element, options, mapOptionKeys)
    return options;
  }
  
  map.install = function() {
    $('.gmap').each(map.setupElement)
  };
  
  map.setupElement = function() {
    var e = this;
    var $e = $(this);
    var id = $e.attr("id");
    // Autogenerate id.
    if(!id) {
      id = map.autoIDPrefix + (map.count++);
      $e.attr("id", id);
    }
    var lat = Number($e.attr("data-latitude"));
    var lng = Number($e.attr("data-longitude"));
    var point = new google.maps.LatLng(lat, lng);
    // Create the Map.
    var mapOptions = mapOptionsForElement($e);
    mapOptions.center = point;
    var currentMap = new google.maps.Map(e, mapOptions);
    // Create and add the marker
    var markerOptions = {
      position: point,
      map:      currentMap
    };
    mergeOptionsWithData($e, markerOptions, markerOptionKeys, "marker-");
    var marker = new google.maps.Marker(markerOptions)
    // And Done...
    return currentMap;
  };
  
  $(document).ready(function() { map.install(); });
  return map;
})(jQuery);