Using ruby array inside JS.erb to plot locations on a map

Question

I'm new to coding. I'm trying to use JS to plot points on a map, using google's API. I can get it to use values if I input them manually, but I need to be able to add them via Ruby.

Here's the code that works:

   function initMap() {

    var mapv2 = new google.maps.Map(document.getElementById('mapv2'), {
    zoom: 3,
   center: {lat: -28.024, lng: 140.887}
   });

   var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

   var markers = locations.map(function(location, i) {
    return new google.maps.Marker({
    position: location,
      label: labels[i % labels.length]
    });
  });

  var markerCluster = new MarkerClusterer(mapv2, markers,
  {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
  var locations = [
  {lat: -31.563910, lng: 147.154312},
  {lat: -33.718234, lng: 150.363181},
  {lat: -33.727111, lng: 150.371124},
  {lat: -33.848588, lng: 151.209834},
  {lat: -33.851702, lng: 151.216968},
  {lat: -34.671264, lng: 150.863657},
  {lat: -35.304724, lng: 148.662905},
];

The bit that I'm trying to change is locations. Here's what I've come up with but it's not working:

Update

  function initMap() {

  var mapv2 = new google.maps.Map(document.getElementById('mapv2'), {
zoom: 3,
  center: {lat: -28.024, lng: 140.887}
  });

  var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

  var markers = locations.each(function(location, i) {
return new google.maps.Marker({
  position: location,
  label: labels[i % labels.length]
    });
  });

   var markerCluster = new MarkerClusterer(mapv2, markers,
  {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
  var locations = '<%= @array %>';

@latitude and longitude return an array of co-ordinates, in rails. Hopefully that makes sense. If you need anything else, please let me know! Any pointing in the right direction, or constructive criticism is greatly appreciated!

Edit: So in my controller I have:

  def index
    @places = Place.all
    @longitude = @places.pluck(:longitude)
    @latitude = @places.pluck(:latitude)
  end

Answer 1

@latitude and longitude return an array of co-ordinates

Well in that case it not gonna work, since you need array of hashes with lat and lng as keys.

You should extract the latitude and longitude for each location , construct a hash with lat , lng keys and push those to an array.

Since there isn't much information provided, I'm going to assume and provide a sample example

Example:

@locations = #location objects with lat and lng coordinates
@array = []
@locations.each do |location|
  @array.push({
    lat: location.latitude,
    lng: location.longitude
  })
end

And then in js.erb , just do

var locations = '<%= @array %>';

Update:

With your updated code, the above example should like below

@places = Place.all
@array = []
@places.each do |place|
  @array.push({
    lat: place.latitude,
    lng: place.longitude
  })
end

Answer 2

In your controller:

places = Place.all

@coordinates = places.map{|place| {lat: place.latitude, lng: place.longitude}}

in your view:

var locations = <%= @coordinates.to_json %>;

Answer 3

I fixed it by combining answers from @dickieboy & @pavan and then adding in gsub to remove the quotes. I also moved all the code inside a script on my html page. Here's the complete code:

Places Controller

def index
 @places = Place.all
 @array = []
 @places.each do |place|
   @array.push({
    lat: place.latitude,
    lng: place.longitude
  })
 end
end

Index.html.erb

<div id="mapv2"></div>
 <script type="text/javascript">
   function initMap() {
   var locations = <%= @array.to_json.gsub(/\s|"|'/,'') %>;
   var mapv2 = new google.maps.Map(document.getElementById('mapv2'), {
zoom: 3,
center: {lat: -28.024, lng: 140.887}
   });

   var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

   var markers = locations.map(function(location, i) {
return new google.maps.Marker({
  position: location,
  label: labels[i % labels.length]
});
});

  var markerCluster = new MarkerClusterer(mapv2, markers,
  {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}  

 </script>


 <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

End result