Google Maps for Rails <img src=“http://www.pledgie.com/campaigns/23367.png” alt=“Endorse” />
<img src=“https://secure.travis-ci.org/apneadiving/Google-Maps-for-Rails.png?branch=master” alt=“Build Status” /> <img src=“https://codeclimate.com/github/apneadiving/Google-Maps-for-Rails.png” /> <img src=“https://badge.fury.io/rb/gmaps4rails.png” alt=“Gem Version” /> <img src=“http://api.coderwall.com/apneadiving/endorsecount.png” alt=“Endorse” /> <img src=“https://d2weczhvl823v0.cloudfront.net/apneadiving/google-maps-for-rails/trend.png” alt=“Bitdeli Badge” />
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).
Here is a quick tutorial on youtube, and my presentation on speaker deck.
For live examples, see here.
A note for < 2.x users
Google-Maps-for-Rails-2.0 is an important rewrite to keep the minimum code and features. If you’re migrating from previous versions, you may want to read the rational about it.
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&sensor=false&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/ (‘lo-dash` is compatible too, your choice!).
3) Javascript source code
If you have the asset pipeline, add this:
//= require underscore
//= require gmaps/google
If you don’t have asset 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, Kml
-
Refresh your map on the fly with Javascript (and Ajax)
Todo?
Feel free to contact us, you have your say.
Copyright
MIT license.
Author: Benjamin Roth