Ruby on Rails - Geocoder objects as google map marker array

Question

I'm currently developing a sales rep tracking tool and am stuck at showing a Markers array for the geocoded objects in a map. I'm using geocoder's near function to find geocoded objects 0.5km's from my location passed via the url. My current code works as long as there is only one object within that radius and I know that I need to use an Array for showing more than one object, but I've been stuck at this for the past 2 weeks.

stores_controller.rb
def index
    @latitude = params[:latitude].to_f
    @longitude = params[:longitude].to_f
    @stores = current_user.stores
    @locations = @stores.near([@latitude, @longitude], 0.5)
end

The map on my stores/index.html.erb

function initMap() {
    <% @locations.each do |store| %>
    var lat = <%= store.latitude %>
    var lng = <%= store.longitude %>
    var mylatlng = {lat: lat, lng: lng}

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: mylatlng
    }); 

    var marker = new google.maps.Marker({
      position: mylatlng,
      map: map,
      animation: google.maps.Animation.DROP,
    });
      google.maps.event.addListener(marker, 'click', function () {
      var c = confirm('Would you like to visit this store?')
      if (c === true) {
      window.location.href = '<%= store_path(store) %>';  
      }
      if (c === false) {
      window.location.href = '<%= dashboard_path %>';   
      }

    });

    var contentString = 'Please click on this Marker to visit' + ' ' + '<%= store.storename %>';   

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });
    google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
    infowindow.open(map, marker);
    });  
    }
    <% end %>

The way the app is set up there will be at most two or 3 objects at a time, and I know that json is an option, but I'm hopeful that there would be a way to avoid doing that. All of the resources I've read about map arrays involve manually passing the arrays parameter's, but I need to do it dynamically, seeing as though the object will vary from rep to rep.

Thanks in advance for any assistance.

Orlando · Accepted Answer · 2017-02-14 19:44:53Z

1

You're mixing your Javascript with your Ruby code in a way that doesn't make any sense. The reason it works with one is that when you execute it with a single object in the @locations array, it runs once and outputs that Javascript correctly. When it has > 1 object, it's basically duplicating the contents of your initMap Javascript method.

Assuming you're using jQuery, here's a way that would work:

<%- @locations.map {|store| "<div id='store_#{store.id}' class='store-object' data-latitude='#{store.latitude}' data-longitude='#{store.longitude}' data-name='#{store.name}' data-path='#{store_path(store)}'></div>".html_safe} %>

function initMap() {
  var $stores = $(".store-object");
  $stores.each(function() {
    var lat = $(this).data("latitude");
    var lng = $(this).data("longitude");
    var mylatlng = {lat: lat, lng: lng}

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: mylatlng
    }); 

    var marker = new google.maps.Marker({
      position: mylatlng,
      map: map,
      animation: google.maps.Animation.DROP,
    });

    google.maps.event.addListener(marker, 'click', function () {
      var c = confirm('Would you like to visit this store?')
      if (c === true) {
        window.location.href = $(this).data("path");  
      }
      if (c === false) {
        window.location.href = '<%= dashboard_path %>';   
      }
    });

    var contentString = 'Please click on this Marker to visit' + ' ' + $(this).data("name");   

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
      infowindow.open(map, marker);
    });  
  });
}

answered Feb 14, 2017 at 19:44

Orlando

1,3463 gold badges12 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael Bekker Over a year ago

Thank you for the reply, I'm still new to both Rails, JS, JQuery and Google maps, and have been following tutorials on the subject. I tried your code, it throws no errors, but does not display the map or any markers. Using Chrome Developer Tools, it also does not throw out any errors, yet does not seem to want to work. I also tried to fiddle with the code a little bit, but to no avail. Could it be that I have to use a markers array for the marker, seeing as though there could be more than one store loaded at a time in the locations array? Thank you again for any help.

Michael Bekker · Accepted Answer · 2017-02-19 18:08:44Z

Thank you @Orlando for pointing me in the right direction. I managed to solve my problem by using JSON and a JS loop for the markers and infowindows. I did not changed anything in my controller and the revised code is shown below.

var map;

function initMap () {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: <%= params[:latitude] %>, lng: <%= params[:longitude] %>},
      zoom: 18,
      scrollwheel: false,
});

var json = <%= raw @locations.map.to_json {|store|}.html_safe %>;

for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
  LatLng = {lat: data.latitude, lng: data.longitude};

var marker = new google.maps.Marker({
position: LatLng,
map: map,
animation: google.maps.Animation.DROP
});

google.maps.event.addListener(marker, 'click', function () {
      var c = confirm('Would you like to visit this store?')
      if (c === true) {
      window.location.href = "stores/" + data.id;
      }    
      if (c === false) {
      window.location.href = '<%= dashboard_path %>';   
      }
  });

    var infowindow = new google.maps.InfoWindow();
    infowindow.setContent('Click the Marker to visit' + ' ' + data.storename);
    infowindow.open(map, marker);
    }
}

Collectives™ on Stack Overflow

Ruby on Rails - Geocoder objects as google map marker array

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related