Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Integration of Google-map in Rails Application

3,445 views

Published on

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

Published in: Technology
  • Dating for everyone is here: ♥♥♥ http://bit.ly/2F4cEJi ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❤❤❤ http://bit.ly/2F4cEJi ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Integration of Google-map in Rails Application

  1. 1. Integration of Google Maps in Rails Application Swati Jadhav 1
  2. 2. Gmap4rails Gem provides: Multiple Maps  Markers with easy customization  Clusters  Circles  Polygons  Polylines 
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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 

×