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:
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.
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).
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.