Gmaps4rails - Rails 4

Question

I'm trying to figure out how to get a map to display the address a user creates.

I have an address model and a projects model.

The associations are:

Address:

 belongs_to :addressable, :polymorphic => true

Project:

has_many :addresses, as: :addressable
      accepts_nested_attributes_for :addresses,  reject_if: :all_blank, allow_destroy: true

In address.rb, I have:

def full_project_address_formal
    [self.first_line, middle_line, last_line, country_name].compact.join("
").html_safe
  end

I also then have:

def first_line
    [unit, street_number, street.titlecase].join(' ')
  end

  def middle_line
    if self.building.present? 
    end
  end

  def last_line
    [city.titlecase, region.titlecase, zip].join('   ')
  end

  def country_name
    country = self.country
    ISO3166::Country[country]
  end

In my show page, I then have:

<%= @project.addresses.first.project_address %>

All of that works to display the project address.

I then want to display a map.

I have installed these gems:

gem 'geocoder'
gem 'gmaps4rails'
gem 'underscore-rails'
gem 'countries'
gem 'country_select'

In my application.js, I have:

//= require gmap3.min
//= require underscore

In my address.rb, I have:

geocoded_by :full_project_address_formal   # can also be an IP address
after_validation :geocode

In my address controller I have (I don't know why - I copied it from another post on SO - although my address model does have latitude and longitude in the schema):

def index
  @addresses = Address.all
  authorize @addresses

  @hash = Gmaps4rails.build_markers(@addresses) do |address, marker|
    marker.lat address.latitude
    marker.lng address.longitude
    end
  end

I'm completely lost for what to do next. I've tried at least 30 different ways of trying to display the address in a map.

PROJECT HQ
                                
                                    <%= @project.addresses.first.project_address %>

In my main.js file, I have:

if (dp.fn.gmap3) {
        var target_map = dp('#map');
        var lat = target_map.data('lat');
        var lng = target_map.data('lng');
        target_map.gmap3({
                marker: {
                latLng: [lat, lng],
                draggable: false
            },
                map: {
                      options: {
                            zoom: 12,
                    scrollwheel: false,
                    disableDefaultUI: true,
                    styles:
                            [{"featureType": "landscape.man_made", "elementType": "geometry", "stylers": [{"color": "#f7f1df"}]}, {"featureType": "landscape.natural", "elementType": "geometry", "stylers": [{"color": "#d0e3b4"}]}, {"featureType": "landscape.natural.terrain", "elementType": "geometry", "stylers": [{"visibility": "off"}]}, {"featureType": "poi", "elementType": "labels", "stylers": [{"visibility": "off"}]}, {"featureType": "poi.business", "elementType": "all", "stylers": [{"visibility": "off"}]}, {"featureType": "poi.medical", "elementType": "geometry", "stylers": [{"color": "#fbd3da"}]}, {"featureType": "poi.park", "elementType": "geometry", "stylers": [{"color": "#bde6ab"}]}, {"featureType": "road", "elementType": "geometry.stroke", "stylers": [{"visibility": "off"}]}, {"featureType": "road", "elementType": "labels", "stylers": [{"visibility": "off"}]}, {"featureType": "road.highway", "elementType": "geometry.fill", "stylers": [{"color": "#ffe15f"}]}, {"featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [{"color": "#efd151"}]}, {"featureType": "road.arterial", "elementType": "geometry.fill", "stylers": [{"color": "#ffffff"}]}, {"featureType": "road.local", "elementType": "geometry.fill", "stylers": [{"color": "black"}]}, {"featureType": "transit.station.airport", "elementType": "geometry.fill", "stylers": [{"color": "#cfb2db"}]}, {"featureType": "water", "elementType": "geometry", "stylers": [{"color": "#a2daf2"}]}]
                      }
                }

          });
    }

I"m lost and stuck. Does anyone know how to get from where I am to the point where I can take an address and produce a map in my show?

A SECOND ATTEMPT. HAVING WATCHED THIS YOU TUBE VIDEO: https://www.youtube.com/watch?v=R0l-7en3dUw&feature=youtu.be

I'm still stuck, but not sure how to approach solving this problem. My complete address setup is now:

gems:

gem 'geocoder'
gem 'gmaps4rails'
gem 'underscore-rails'
gem 'countries'
gem 'country_select'

application.js

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

vendor/assets/javascript/ underscore.js

I copied and pasted the entire underscore production version. In the video, that appears to be 1 uncommented line. I couldn't find that. Instead, I have a long page of gibberish.

address model:

class Address < ActiveRecord::Base


  geocoded_by :full_address   # can also be an IP address
  before_save :capitalise_address
  before_save :upcase_zip
  # --------------- associations

    belongs_to :addressable, :polymorphic => true

  # --------------- scopes

  # --------------- validations
    validates_presence_of :street_number, :street, :zip, :country 


  # --------------- class methods

  def first_line
    [unit, street_number, street.titlecase].join(' ')
  end

  def middle_line
    if self.building.present? 
    end
  end

  def last_line
    [city.titlecase, region.titlecase, zip].join('   ')
  end


  def country_name
    country = self.country
    ISO3166::Country[country]
  end


  def full_address
    [self.first_line, middle_line, last_line, country_name].compact.join("
").html_safe
  end


  after_validation :geocode#, if  self.full_address.changed? 


end

address controller:

def index
  @addresses = Address.all
  authorize @addresses

  @hash = Gmaps4rails.build_markers(@addresses) do |address, marker|
    marker.lat address.latitude
    marker.lng address.longitude
    end
  end

I don't know why this is in an index action. I"m trying to use a projects/show action. I've not understood the reasons for the above step.

projects show:


    <%= render partial: "address" %>

views/projects/_address.html.erb

Not sure if this file is supposed to have any html in it. following this tutorial ( https://github.com/apneadiving/Google-Maps-for-Rails), I've no clue as to how the maps (even if it is working, would know what address to use.

app/assets/javascripts/addresses.js

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

not sure if Im supposed to put the above inside script tags

I'm lost. At this point, I have an error that says:

ExecJS::RuntimeError at /projects/26
SyntaxError: [stdin]:13:32: unexpected <

I don't know where to look for the error because I don't know what anything is supposed to look like. I'm lost and stuck. I have read the google api documentation (it assumes knowledge of js at a level that I don't have) and all of the geocoder and gmaps4rails wiki documentation.

A THIRD ATTEMPT

I found this wiki resource, which gives template js and html. http://apneadiving.github.io

I replace the content of my addresses.js file with:

var handler = Gmaps.build('Google');
handler.buildMap({ internal: {id: 'geolocation'} }, function(){
  if(navigator.geolocation)
    navigator.geolocation.getCurrentPosition(displayOnMap);
});

function displayOnMap(position){
  var marker = handler.addMarker({
    lat: position.coords.latitude,
    lng: position.coords.longitude
  });
  handler.map.centerOn(marker);
};

And add make the content of my partial:

I get an error that says:

ExecJS::RuntimeError at /projects/26
SyntaxError: [stdin]:2:1: reserved word 'var'

Thanks to Max below, for the help with removing the '.coffee' extension from my js files. Now, there is just a blank space where the map was supposed to be.

Vishal · Accepted Answer

If I understood you correctly, you want to display a map on a project's show page along with the project's address/addresses.

The @hash variable (from the tutorial) contains the required information to create markers on the map (eg. latitude, longitude etc) and it is used as markers = handler.addMarkers(<%=raw @hash.to_json %>); which then actually adds the markers with that information.

In your case, since you need the map on project's show page, you should set @hash in show action of the ProjectsController with @addresses set to whatever addresses you want to display on the page - presumably @project.addresses, where @project value is set before @addressses.

I think your lat & lng are stored not in fields/columns named lat & lng but latitude & longitude in which case you need to mention them specifically like this - geocoded_by :full_project_address_formal, latitude: :lat, longitude: :lng. You should make sure that the values of latitude & longitude fields are indeed present for the addresses in the database to be safe.

def show
  @project = Project.find(params[:id])
  @addresses = @project.addresses

  @hash = Gmaps4rails.build_markers(@addresses) do |address, marker|
    marker.lat address.latitude
    marker.lng address.longitude
    marker.infowindow address.full_project_address_formal
  end
end

Once you set the value of @hash in ProjectsController's show action, you can access it inside a script tag in projects/show view. To start with, you can keep the show view simple as this.

Hope this helps. If you get stuck somewhere or need assistance, let me know.

Gmaps4rails - Rails 4

Answers (1)

Related Questions