apneadiving / Google-Maps-for-Rails

Enables easy Google map + overlays creation in Ruby apps
https://apneadiving.github.io/
MIT License
2.27k stars 382 forks source link

Rich Markers with json markers #490

Open ckuwanoe opened 8 years ago

ckuwanoe commented 8 years ago

I need to style the map markers shades of color based on a scoring mechanism. I believe that rich markers is the best way for me to do so, however I'm having some trouble figuring out where in my workflow I need to add it in.

In a previous application (1.xx version of this gem) I was able to use the gmaps4rails_marker_picture method, but it appears this only works when using the gmaps view helper and doesn't work when displaying via json. Is there a preferred method for me to get this working with a json workflow?

My controller action looks like

    @hash = Gmaps4rails.build_markers(@locations) do |location, marker|
      marker.lat location.latitude
      marker.lng location.longitude
      marker.title location.name
      if location.in_use?
        marker.infowindow infowindow_builder(location, "#{Time.zone.parse(location.shift_start.to_s).strftime("%I:%M%p")}-#{Time.zone.parse(location.shift_end.to_s).strftime("%I:%M%p")}", location.canvasser_name)
      else
        marker.infowindow infowindow_builder(location)
      end
      marker.json({
        :name => location.name,
        :street_address => location.street_address,
        :city => location.city,
        :state => location.state,
        :zipcode => location.zipcode,
        :score => location.score.round(2),
        :distance => location.distance_from([current_user.current_latitude,current_user.current_longitude]).round(2)
      })

And my js looks like

function initialize() {
  handler = Gmaps.build('Google');
  handler.buildMap({
    provider: {
      disableDefaultUI: true,
      zoomControl: true,
      zoom: 11,

      // The latitude and longitude to center the map (always required)
      <% if current_user.current_latitude && current_user.current_longitude %>
        center: new google.maps.LatLng(<%= current_user.current_latitude %>,<%= current_user.current_longitude %>),
      <% else %>
        center: new google.maps.LatLng(40.6700, -73.9400), // New York
      <% end %>
      // How you would like to style the map.
      // This is where you would paste any style found on Snazzy Maps.
      styles: [ {   "featureType":"landscape",    "stylers":[     {       "hue":"#FFBB00"     },      {       "saturation":43.400000000000006     },      {       "lightness":37.599999999999994      },      {       "gamma":1     }   ] },  {   "featureType":"road.highway",   "stylers":[     {       "hue":"#FFC200"     },      {       "saturation":-61.8      },      {       "lightness":45.599999999999994      },      {       "gamma":1     }   ] },  {   "featureType":"road.arterial",    "stylers":[     {       "hue":"#FF0300"     },      {       "saturation":-100     },      {       "lightness":51.19999999999999     },      {       "gamma":1     }   ] },  {   "featureType":"road.local",   "stylers":[     {       "hue":"#FF0300"     },      {       "saturation":-100     },      {       "lightness":52      },      {       "gamma":1     }   ] },  {   "featureType":"water",    "stylers":[     {       "hue":"#0078FF"     },      {       "saturation":-13.200000000000003      },      {       "lightness":2.4000000000000057      },      {       "gamma":1     }   ] },  {   "featureType":"poi",    "stylers":[     {       "hue":"#00FF6A"     },      {       "saturation":-1.0989010989011234      },      {       "lightness":11.200000000000017      },      {       "gamma":1     }   ] }]
    },
    internal: {id: 'map'}}, function(){
      var json_array = <%=raw @hash.to_json %>
      var markers = handler.addMarkers(json_array);
      _.each(json_array, function(json, index){
        json.marker = markers[index];
      });

    createSidebar(json_array);
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
  });
}

I tried the method from 'Changing Handler Behavior' here https://github.com/apneadiving/Google-Maps-for-Rails/wiki/Change-handler-behavior , but I'm getting an error when loading the richmarkers.js file.

screenshot 2015-08-28 16 13 55

Any help would be greatly appreciated.

thebatu commented 7 years ago

how did u solve it ?