Draw polygon with gmaps4rails

Question

I am using rails 4 with gmaps4rails and now try to display a map with a polygon on the "show" view of one of my models. I think I have pretty much everything in place as manually providing latitude and longitude in the javascript works just fine for markers as well as for polygons. The model name is "dataset". It has four coordinate fields which represent the coordinates of the geographic bounding box of the data that is contained in the dataset (:north_bounding_coordinate, east_... etc). I need to process this to turn it into 4 latitude longitude values in order to display a polygon shape. In my dataset model I try to build a hash that I can turn to json to pass into the javasript in my view. However this seems not to work properly.

Here my view (dataset show):

.container
    %h3 Map
    %br
    .round-frame
      %div{style: "width: 800px;"}
        #map{style: "width: 800px; height: 400px;"}


  :javascript
   var handler = Gmaps.build('Google');
   handler.buildMap({ internal: {id: 'map'}}, function(){
     polygons = handler.addPolygons(=raw @bounding_box.to_json);
    handler.bounds.extendWith(polygons);
      handler.fitMapToBounds();
      handler.getMap().setZoom(12);
    });

Here my controller (dataset show action):

def show
      @bounding_box = @dataset.get_coordinates
end

And last but not least the dataset model part:

def get_coordinates
                  north_east = Gmaps4rails.build_markers(self) do |dataset, marker|
                          marker.lat dataset.north_bounding_coordinate
                          marker.lng dataset.east_bounding_coordinate
                  end
                  south_east = Gmaps4rails.build_markers(self) do |dataset, marker|
                          marker.lat dataset.north_bounding_coordinate
                          marker.lng dataset.east_bounding_coordinate
                  end
                  north_west = Gmaps4rails.build_markers(self) do |dataset, marker|
                          marker.lat dataset.north_bounding_coordinate
                          marker.lng dataset.west_bounding_coordinate
                  end
                  south_west = Gmaps4rails.build_markers(self) do |dataset, marker|
                          marker.lat dataset.north_bounding_coordinate
                          marker.lng dataset.west_bounding_coordinate
                  end
                  north_east + south_east + north_west + south_west
          end

The map does not show anything. If I inspect the hash in my view like I would put it into the java script it looks like this:

"[{\"lat\":29.285201,\"lng\":118.148346},{\"lat\":29.285201,\"lng\":118.148346},{\"lat\":29.285201,\"lng\":29.101777},{\"lat\":29.285201,\"lng\":29.101777}]" 

Maybe the reason for it not to work is that strange escaping thing for the keys? How can I get this to work properly? Any suggestions or solutions are welcome.

UPDATE (new model method for bounding box):

def get_coordinates
                [{"lat" => self.north_bounding_coordinate, "lng" => self.west_bounding_coordinate},
               {"lat" => self.south_bounding_coordinate, "lng" => self.west_bounding_coordinate},
                 {"lat" => self.south_bounding_coordinate, "lng" => self.east_bounding_coordinate},
                {"lat" => self.north_bounding_coordinate, "lng" => self.east_bounding_coordinate}]
          end 

Inspecting that gives the however the same results except the coorinates are now correct. When I create a map with polygon manually like this works just fine:

:javascript
   var handler = Gmaps.build('Google');
     handler.buildMap({ internal: {id: 'map'}}, function(){
     var polygons = handler.addPolygons(
       [
         [
           {lat:  29.29139, lng: 118.0372}, { lat: 29.13833, lng: 118.0372},
           {lat:  29.13833, lng:118.18776}, { lat: 29.29139, lng:118.18776},
         ]
       ],
        {
        "strokeColor": "#FF0000",
        }
     );
     handler.bounds.extendWith(polygons);
     handler.fitMapToBounds();
     handler.getMap().setZoom(8);
   });

When I escape the strings in the manual example like it is done by as_json automatically the map is not shown anymore. So I suspect that this escaping is the problem however I do not know how to get around that.

I found a solution however I do not know if this is a good one. Instead of using:

polygons = handler.addPolygons(=raw @bounding_box.to_json);

I now use

polygons = handler.addPolygons(#{@bounding_box.to_json});

And It works nicely. It does not escape the strings anymore.

Answer 1

The solution is to use:

#{@bounding_box.to_json}

Instead of

=raw @bounding_box.to_json