Using Google Maps API Libraries (Adsense, Geometry, etc.) in gmaps4rails Way!

Google Maps API has it’s official AdSense Library, which allow you to add advertisement in your own map view easily. By using gmaps4rails, the recently popular map service library in RubyOnRails, some problems occurred if we write the javascript tag mention on the Google Maps API document. Why? because the google maps api version gmaps4rails used is not the newest version. Using the newest js library result in conflict between different versions of Google Maps API.

To avoid this, we can simply put { :libraries => [:adsense] } in :map_options, for example:

1
2
3
4
5
6
7
8
9
@google_maps_html = gmaps( :map_options => {
    :detect_location => true,
    :libraries => [:adsense],
    :center_on_user => true,
    :zoom => 15,
    :auto_zoom => false,
    :auto_adjust => true,
    :disableDefaultUI => true },
    :markers => { :data => @json })

And in our view, put javascript like this in the window load callback:

1
2
3
4
5
6
7
8
9
10
11
Gmaps.map.callback = function() {
  var adUnitDiv = document.createElement('div');
  var adUnitOptions = {
    format: google.maps.adsense.AdFormat.HALF_BANNER,
    position: google.maps.ControlPosition.TOP_CENTER,
    publisherId: 'your publisher id',
    map: this.map,
    visible: true
  };
  var adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);
}

The :libraries key seems not appear on the Google-Maps-for-Rails wiki. But after trace the source code, we don’t have to modify the plugin but just use it. Force working with the newest Google Maps API with gmaps4rails is not recommended.