Google Maps for Rails

<img src=“secure.travis-ci.org/apneadiving/Google-Maps-for-Rails.png?branch=master” alt=“Build Status” /> <img src=“” /> <img src=“” alt=“Gem Version” /> <img src=“” alt=“Endorse” />

Gmaps4rails is developed to simply create a Google Map with overlays (markers, infowindows…). Yet it’s backed on a very flexible codebase which could be prone to accept other map providers.

Use it with any Ruby app (I guess you could simply take the js anywhere if you like).

Requirements

1) Gemfile

gem 'gmaps4rails'

2) HTML

Add a div to bear your map, example:

<div style='width: 800px;'>
  <div id="map" style='width: 800px; height: 400px;'></div>
</div>

2) Javascript Dependencies:

Insert google scripts in your dom:

<script src="//maps.google.com/maps/api/js?v=3.13&amp;sensor=false&amp;libraries=geometry" type="text/javascript"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js' type='text/javascript'></script>

You’ll require underscore.js too, see here: underscorejs.org/

3) Javascript source code

If you have the asset pipeline, add this:

//= require underscore
//= require gmaps/google

If you don’t have aset pipeline, you’ll need to import the js OR coffee files:

rails g gmaps4rails:copy_js

rails g gmaps4rails:copy_coffee

4) Javascript code:

Create your map:

handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
  markers = handler.addMarkers([
    {
      "lat": 0,
      "lng": 0,
      "picture": {
        "url": "https://addons.cdn.mozilla.net/img/uploads/addon_icons/13/13028-64.png",
        "width":  36,
        "height": 36
      },
      "infowindow": "hello!"
    }
  ]);
  handler.bounds.extendWith(markers);
  handler.fitMapToBounds();
});

Generating JSON

In your controller:

@users = User.all
@hash = Gmaps4rails.build_markers(@users) do |user, marker|
  marker.lat user.latitude
  marker.lng user.longitude
end

In your view:

markers = handler.addMarkers(<%=raw @hash.to_json %>);

Easily customizable

You can change almost everything with a few lines of code. See details here

Options

  • Markers with Info window, Custom Picture, RichMarkers (make your own markers with custom html)

  • Circles, Polylines, Polygons

  • Geocode directly your address and retrieve coordinates.

  • Auto-adjust the map to your markers

  • Refresh your map on the fly with Javascript (and Ajax)

  • KML support

  • Easy multimap

  • More details in the Wiki

Todo?

Feel free to contact us, you have your say.

MIT license.

Authors: Benjamin Roth, David Ruyer

Contributors