Integration of Google Maps in Rails Application

1

Swati Jadhav

Gmap4rails Gem provides:Multiple MapsMarkers with easy customizationClustersCirclesPolygonsPolylines

What all you need at Model level?

Latitude, Longitude and gmaps4rails_addressIn model: acts_as_gmappable :process_geocoding =>

false

def gmaps4rails_addressend

If your model do not have the latitude or longitude as fields, then you can delegate it or add instance methods.

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

Map Configuration:detect_location: falsecenter_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: nullminZoom: nullauto_adjust: true (adjust the map to the markers if set to

true)

MarkersLoad 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 })

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)

ClusterCluster 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} })

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

callback Gmaps.map.callback = function(){   google.maps.event.addListenerOnce(Gmaps.

map.serviceObject, 'idle', function(){   / set zoom-level   var zoomLevel =

Gmaps.map.serviceObject.getZoom();   if (zoomLevel > 12) {   Gmaps.map.serviceObject.setZoom(12);   }})};

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