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(); });
5) Add options:
You’re likely going to want to customize your maps by passing an options object. Using the example above, let’s say you’d like to disable the map controls. This and any other options you can find in the Google Maps API reference can be passed into the ‘provider` options hash like so:
handler = Gmaps.build('Google'); handler.buildMap({ provider: { disableDefaultUI: true // pass in other Google Maps API options here }, 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(); } );
You can see other examples of adding ‘provider` options in the live examples. Also, check the wiki for further documentation on the possible JavaScript methods.
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 %>);
You can change almost everything with a few lines of code. See details here.
-
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)
Feel free to contact us, you have your say.
MIT license.
Author: Stefan Dura