Skip to content
Enables easy Google map + overlays creation in Ruby apps
Branch: master
Clone or download
apneadiving Merge pull request #550 from mrIllo/master
Added origin to marker's picture options to allow use of sprite images
Latest commit 2537e2a Sep 25, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
js_compilation
lib Added a way to provide scaledSize for markers Dec 9, 2015
script
spec update rspec syntax from should to expect May 15, 2014
vendor/assets/javascripts/gmaps Added origin to marker's picture options to allow use of sprite images Sep 12, 2017
.gitignore Add to_gmaps4rails method to Enumerable rather than Array. Fixes issue Jun 26, 2012
.travis.yml
Gemfile chnaged gemfile Oct 21, 2013
Gemfile.lock
MIT-LICENSE merged with new_gen Apr 30, 2012
README.rdoc
Rakefile
gmaps4rails.gemspec Editedgemspec [ci skip] Oct 22, 2013

README.rdoc

Google Maps for Rails Endorse codementor-button

Build Status Gem Version 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).

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 rationale 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>

3) Javascript Dependencies:

Insert google scripts in your dom:

<script src="//maps.google.com/maps/api/js?key=[your API key]"></script>
<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
<script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' type='text/javascript'></script> <!-- only if you need custom infoboxes -->

You'll require underscore.js too, see here: underscorejs.org/ (`lo-dash` is compatible too, your choice!).

4) 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

5) 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": "http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-32.png",
        "width":  32,
        "height": 32
      },
      "infowindow": "hello!"
    }
  ]);
  handler.bounds.extendWith(markers);
  handler.fitMapToBounds();
});

6) 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": "http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-32.png",
          "width":  32,
          "height": 32
        },
        "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.

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:

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

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)

  • More details in the Wiki

Todo?

Feel free to contact us, you have your say.

Copyright

MIT license.

Author: Benjamin Roth

Contributors

You can’t perform that action at this time.