ruby-on-railsgmaps4rails

Google Maps rails 5


I have a CRUD for "Imovels" (properties), so in the data base I have the address in different fields. That is:

<%= f.text_field :logradouro %> # street name
<%= f.number_field :numero %> # number
<%= f.collection_select :bairro_id, @bairros, :id, :nome, {} %> # neighborhood
<%= f.collection_select :cidade_id, @cidades, :id, :nome, {} %> # city

I am using the gem gmaps4rails for show the location on the map. I follow the tutorial on the gem documentation but the map doesn't render.
On the Puma log shows up two errors

ActionController::RoutingError (No route matches [GET] "/assets/underscore-min.map"):

NoMethodError (undefined method `geocoded_by' for #<Class:0x007fe7c02f2fb0>):

Model:

class Imovel < ApplicationRecord
  geocoded_by :enderecoCompleto
  after_validation :geocode
end

Concatenate:

def show
    @enderecoCompleto = "#{@imovel.logradouro}, #{@imovel.cidade.nome}"
end

The view: Here I want to show the map basing on the endereçoCompleto, that is the Street Name and City. I really doesn't Know how to proceed here.

<div style='width: 800px;'>
  <div id="map" style='width: 800px; height: 400px;'></div>
</div>
    <script>
    handler = Gmaps.build('Google');
    handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
      markers = handler.addMarkers([
        {
          "lat": 0,
          "lng": 0,
          "picture": {
            "url": "http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-32.png",
            "width":  32,
            "height": 32
          },
          "infowindow": "hello!"
        }
      ]);
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
    });
    </script>
</div>

If I let that code on the Model, the returned error is:

NoMethodError (undefined method `geocoded_by' for #<Class:0x007fe7c02f2fb0>):

How I mentioned above. How can I render this map basing on the address in the database (without latitude and longitude) ?

After the help of @simple lime the geocoded problem was solved, but now the page render but the map doesn't show up. Actually messed up the other javascript code. Seems to be something relationed with the turbo links.

On the view:

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=XXXXXX&callback=initMap">
</script>
<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
<script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' type='text/javascript'></script>

On the application.js:

//= require underscore
//= require gmaps/google

On the console:

enter image description here


Solution

  • Looking at the gem + the youtube video on it's GitHub page. It appears you need to install the geocoder gem as well. That's what giving you the geocoded_by method.

    Looking at the geocoder, if you add latitude:float longitude:float to your model, it should automatically fetch and update those in the after_validation :geocode you have in your model. From there, you can just pass your latitude and longitude to your view and replace

          "lat": 0,
          "lng": 0,
    

    with them. Make sure to read through the geocoder gem page, got a couple of useful things on there.

    Edit

    For the newest issue, I'm not great with javascript, but I'd try removing the async defer and that &callback=initMap from your google maps javascript tag (since you don't have a function defined with that name).

    Original answer, may have been a typo in the question not an actual problem with the code.

    The NoMethodError is being caused by a typo gecoded_by should probably be geocoded_by. The RoutingError is just for a source map file which shouldn't cause any issues.