Your SlideShare is downloading. ×
0
Integration of Google-map in Rails Application
Integration of Google-map in Rails Application
Integration of Google-map in Rails Application
Integration of Google-map in Rails Application
Integration of Google-map in Rails Application
Integration of Google-map in Rails Application
Integration of Google-map in Rails Application
Integration of Google-map in Rails Application
Integration of Google-map in Rails Application
Integration of Google-map in Rails Application
Integration of Google-map in Rails Application
Integration of Google-map in Rails Application
Integration of Google-map in Rails Application
Integration of Google-map in Rails Application
Integration of Google-map in Rails Application
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Integration of Google-map in Rails Application

1,951

Published on

simple walk-through to integrate Google-map in Rails Application.

simple walk-through to integrate Google-map in Rails Application.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,951
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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)
  • 8. 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} })
  • 9. 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()
  • 10. 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); }})};
  • 11. 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 

×