Google Maps n'affiche pas les marqueurs du modèle Rails 5

Question

Je construis une application sur Rails 5, Ruby 2.4.0 et j'essaie d'utiliser l'API V3 de Google Maps.

Cela dit, j'ai deux lieux dans mon modèle de lieux que je veux afficher sur une carte affichée sur mon site locations/index.html.erb.

J'ai suivi ce question de la pile dans l'espoir de pouvoir la modifier pour répondre à mes besoins, mais en vain. La carte se charge elle-même, mais aucun des marqueurs n'apparaît.

Mon lien vers l'API se trouve dans mon application/layout.html.erb dans l'en-tête, et ce qui suit se trouve dans mon fichier locations/index.html.erb :

<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>

Essentiellement, j'ai essayé de boucler sur chaque emplacement et de fournir le lat et le lng de chaque emplacement dans un nouveau marqueur et de l'afficher sur la carte de la page d'index.

Toute assistance serait grandement appréciée car je suis vraiment coincé ici maintenant !

Merci.

EDIT #1

EDIT # 2

EDIT # 3

Answer 1

Vous devez ajouter la fonction init du callback, sinon votre code s'exécute avant que toutes les bibliothèques JS de Google Maps soient chargées.

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

Dans votre cas :

...
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
  });
.....