Google Maps not displaying markers from model Rails 5

Question

I am Building an app on Rails 5, Ruby 2.4.0 and trying to use Google Maps API V3.

That said, I have two locations in my locations model that I want to display on a map displayed on my locations/index.html.erb.

I followed this stack question in hopes I could modify it to meet my needs, however to no avail. The Map its self loads, but none of the markers appear.

My api link is in my application/layout.html.erb in the head, and the following is found in my locations/index.html.erb file:

<script type="text/javascript">
  var locations = [
    <% @locations.each do |location| %>
      { lat:<%= location.latitude %>, lng:<%= location.longitude %> },
    <% end %>
  ];

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(-33.92, 151.25),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infowindow = new google.maps.InfoWindow();

  var marker, i;

  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
  }
</script>

Essentially I was trying to loop through each location and provide the lat and lng of each location into a new marker and display on the index page map.

Any assistance here would be greatly appreciated as I am really stuck here now!

Thanks.

EDIT #1

EDIT # 2

EDIT # 3

Try `var locations<%= "= #{(@locations.map { |l| {lat: l.latitude, lng: l.longitude } }).to_json}".html_safe %>;` instead to see what happens. Does it solves? — fschuindt, Apr 29 '17 at 00:19
after trying @fschuindt recomendation, i get an error message in the console (see Edit #1 in question above) — Shawn Wilson, Apr 29 '17 at 00:23
@s1mpl3 i will update with Edit #2 to show error with original code — Shawn Wilson, Apr 29 '17 at 00:25
What do you get when you type `locations` in console? With and without my recommendation, please. — fschuindt, Apr 29 '17 at 00:27
@fschuindt see edit 3, I get this response from the console to both ways my original and your recomended — Shawn Wilson, Apr 29 '17 at 00:33

score 2 · Accepted Answer · answered Apr 29 '17 at 00:31

2

You need to add the init function from the callback otherwise your code executes before all the Google Maps JS libraries are loaded.

https://developers.google.com/maps/documentation/javascript/tutorial

In you case:

...
function initMap(){
var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(-33.92, 151.25),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
.....

answered Apr 29 '17 at 00:31

s1mpl3

1,456
1
10
14

ok so with my code block, and sorry im still pretty crappy with js (although im learning) the example you gave above would go at the top of my script and the rest below it? – Shawn Wilson Apr 29 '17 at 00:38
Yes wrapping all your code. But before you do that you could try adding just function initMap(){ alert('Loaded') } so you can see what will be calling your code telling you that the needed libraries are loaded – s1mpl3 Apr 29 '17 at 01:03
Just keeps saying initMap is not a function – Shawn Wilson Apr 29 '17 at 01:08
when i wrap everyting in that function it dosnt display anything at all. – Shawn Wilson Apr 29 '17 at 01:10
Try to place the script tag that calls Google maps right after the script tag that you showed us here. And make sure it only is loaded once (remove it from were it was loaded before) – s1mpl3 Apr 29 '17 at 01:19

Google Maps not displaying markers from model Rails 5

1 Answers1