Displaying a Polygon with Gmaps4Rails

Displaying a polygon with gmaps4rails

I passed their base tutorial (from screen cast) and markers works fine. But I had problem with polylines (as you with polygons). At the end I resolved my problem (it can help you with polygons).
So, view is the same as they gave :

<%= gmaps({
       "polylines"    => { "data" => @bemap_polylines }
     })
 %>

The model is also the same as their.

class Character < ActiveRecord::Base
  belongs_to :bemap
  acts_as_gmappable

  def gmaps4rails_address
    #describe how to retrieve the address from your model, if you use directly a db column, you can dry your code, see wiki
    address
    logger.info address
  end

end

So, the main problem was into controller. Here is mine :

  def show
    @bemap = Bemap.find(params[:id])
    @bemap_polylines = []
    @bemap_characters = []
    @bemap.characters.each do |v|
      @bemap_characters << { :lng => v[:longitude], :lat => v[:latitude]}
    end
    @bemap_polylines << @bemap_characters
    @bemap_polylines =  @bemap_polylines.to_json
    respond_to do |format|
      format.html # show.html.erb
      format.json { render json: @bemap }
    end
  end

Draw polygon with gmaps4rails

The solution is to use:

#{@bounding_box.to_json}

Instead of

=raw @bounding_box.to_json

Gmaps4rails Polygon

I was missing one line of code in my controller.

@polygons = @polygons.to_json

gmaps4rails v2 polygon click event

It's a matter of variable scope and the real google object lives within the gmaps4rails proxy object:

handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
  var polygons = handler.addPolygons(<%= raw @myhash.to_json %>);

  for (var i=0;i < polygons.length; i++){
    var polygon = polygons[i];
    google.maps.event.addListener(polygon.getServiceObject(), "click", function(evt) {
      alert("hello!");
    });
  }
}

Polygon infowindows in Gmaps4Rails

Replace your method with:

Gmaps.map.callback = function() 
{
    console.log("'sup");
    Gmaps.map.polygons[0].infowindow = new google.maps.InfoWindow
    ({
        content: 'you clicked me!'
    });

    google.maps.event.addListener(Gmaps.map.polygons[0].serviceObject, 'click', function(event) 
    {
        console.log("the click event fired");
        infowindow = Gmaps.map.polygons[0].infowindow;
        infowindow.setPosition(event.latLng);
        infowindow.open(Gmaps.map.map);
    });

}

And change this gem's js line to put true instead of false. I did set to false since I didn't like the cursor change. Anyway it should be in configuration options. Please create an issue on github so that I remember to fix it.

Displaying Associated Image with Gmaps4rails

It's pretty straight:

def gmaps4rails_infowindow
  "<img src='#{self.photo.url}'><strong> #{self.reference} </strong><br /> #{self.bedrooms} bedroom #{self.p_type}<br /> <a href='http://www.crescentlettings.co.uk/properties/#{id}'>See more details</a> " 
end 

gmaps4rails gem: to_gmaps4rails method undefined

You're using code from v1.x and 2.x.

to_gmaps4rails has been removed from the code base. So your first shot was ok:

def index
  @hash = Gmaps4rails.build_markers(TelemetryRecording.all) do |telemetry_recording, marker|
     marker.lat telemetry_recording.latitude
     marker.lng telemetry_recording.longitude
     marker.title telemetry_recording.delivery_unit.driver.full_name
     marker.infowindow telemetry_recording.delivery_unit.driver.full_name
  end
  respond_with @hash
end

and in the js

<script type="text/javascript">
    handler = Gmaps.build('Google');
    handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
        var markers = handler.addMarkers(<%=raw @hash.to_json %>);
        handler.bounds.extendWith(markers);
        handler.fitMapToBounds();

        $('body').on('click', '#replace_markers', function(){ 
            $.getJSON("/telemetry_recordings", function(newMarkers){
                handler.removeMarkers(markers); // to remove previous markers
                markers = handler.addMarkers(newMarkers);
            });
        });
    });   
    });
</script>

---

Related Topics