Google Maps Grundkonfiguration in Rails Bootstrap Modal

Question

Ich habe eine Anfänger-Schwierigkeit, die Google Maps in einem Bootstrap-Modal in Rails anzeigen lässt.

Application.html.erb

<%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=AIzaSyCFm7OzAKuPbEa48b_aZ4S6JqMGVUCwwFs&callback=initMap", async: true, defer: true %> 

Und im modalen Teil:

<div id="map"></div> 

<script> 
    var map; 
    function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -34.397, lng: 150.644}, 
     zoom: 8 
    }); 
    } 
</script> 

Der Fehler in der Konsole an Seite zu laden ist:

"initMap is not a function" 
name: "InvalidValueError" 

, die ich zu übernehmen ist, dass initMap in einem ungeöffneten Modal beim Laden versteckt ist. Irgendwelche Hinweise auf eine Lösung wären willkommen, ich habe es ein paar Stunden lang erforscht.

EDIT: ... nur als Nebenkommentar, und ich weiß, das ist eine andere Frage, aber ich hatte zuvor die Google Orte Autocomplete installiert und funktioniert, die ich herausgenommen Google Map funktioniert, weil es einen Fehler gab (2 google apis laden). Der bisherige application.html.erb für Google Places war

<%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=AIzaSyCFm7OzAKuPbEa48b_aZ4S6JqMGVUCwwFs&libraries=places", async: true, defer: true %> 

.. wie ich die beiden Google-API Script-Tags mischen Sie?

Answer 1

Versuchen ohne Rückruf initMap in der URL mit ..........

<%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=AIzaSyCFm7OzAKuPbEa48b_aZ4S6JqMGVUCwwFs", async: true, defer: true %> 

Hoffnung dies für Sie arbeiten. Vielen Dank!