This document discusses how to integrate Google Maps into a Rails application using the Gmap4rails gem. It covers adding maps and markers to models and controllers, configuring map options like zoom level and clustering, and addressing issues like full zoom-out for single pins or displaying multiple locations. The gem provides features like markers, circles, polygons, clustering, and customizing marker windows. Models need latitude, longitude, and an address method, and controllers generate JSON for markers.

1. Integration of Google
Maps in Rails
Application
Swati Jadhav
1

2. Gmap4rails Gem provides:
Multiple Maps
 Markers with easy customization
 Clusters
 Circles
 Polygons
 Polylines


3. What all you need at Model level?
Latitude, Longitude and gmaps4rails_address
 In model:

acts_as_gmappable :process_geocoding => false
def gmaps4rails_address
end

If your model do not have the latitude or
longitude as fields, then you can delegate it or
add instance methods.

4. Controller:
users = User.all
@json = users.to_gmaps4rails do |user, marker|
marker.infowindow render_to_string(
:partial => <partial_name>,
:locals => { <locals> })
marker.picture({ :picture => “<image-file-path>” } )
marker.json({ :id => user.id })
end
View:
= gmaps( "markers" => { data: @json })

5. Map Configuration:
detect_location: false
 center_on_user: false
(centers map on the location detected through the
browser )
 auto_zoom: true
 zoom : 1 (initial zoom. Set, 'auto_zoom' to false before
setting 'zoom' value. This enables the 'zoom' value to
overide the default.)
 maxZoom: null
 minZoom: null
 auto_adjust: true (adjust the map to the markers if set to
true)


6. Markers

Load map without markers
= gmaps("map_options" => { :center_latitude =>
latitude, :center_longitude => longitude,
"auto_zoom" => true })

With Markers:
= gmaps("map_options" => { :center_latitude =>
latitude, :center_longitude => longitude,
"auto_zoom" => true }, "markers" => { data:
json, options: marker_options })

7. 
Add markers with js using addMarkers()
Example:
var home_pin = [{picture:
"/assets/referral_engine/pins/home.png", width:
32, lat: "#{@practice.latitude}", lng:
"#{@practice.longitude}"}];
Gmaps.map.addMarkers(home_pin)

9. Cluster

Cluster attributes:
•
do_clustering : to cluster markers, default to false
clusterer_gridSize: the more the quicker but the less
precise, default to 50
clusterer_maxZoom: define at which zoom level
clusterer is disabled, default to 10
•
•
Example:
= gmaps("markers" => { data: json, options:
{clusterer_gridSize: 25, do_clustering: true,
clusterer_maxZoom: 20} })

11. Circles

Create circle:
attributes to pass: latitude, longitude, radius, stroke-color, fill-opacity
Example:
circle = [{lng: longitude, lat: latitude, radius: radius,
strokeColor: "#00bdce", fillOpacity: 0.15}].to_json
Gmaps.map.circles = JSON.parse(data.circle)
Gmaps.map.create_circles()

Clear existing circles:
Gmaps.map.clear_circles()

13. callback
Gmaps.map.callback = function(){
google.maps.event.addListenerOnce(Gmaps.map.s
erviceObject, 'idle', function(){
/ set zoom-level
var zoomLevel =
Gmaps.map.serviceObject.getZoom();
if (zoomLevel > 12) {
Gmaps.map.serviceObject.setZoom(12);
}})};

14. Issues:

Full zoom-out for single pin
•
Solution: on map-load check the zoom-level
and adjust accordingly using setZoom()
Display only latest for multiple locations at
same place
• Solution: create group of such locations and add
while creating info-window for that location
include the info of all those grouped locations
