Rails 5 - Google Maps - Javascript Error - initMap is not a function - fixing one js problem creates another

Question

I have been trying for many years to figure out how to use Google maps in my Rails application. I am currently trying to use Rails 5.

I also tried to figure out how to get my javascript working in a production environment.

My recent attempts at these issues are described in this performance issue post and this Google maps page .

After a long codementor session, the problem with the javascript workspace seemed to be resolved by moving:

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

from the title tag to the end of the body tag.

However, javascript Google Maps is now not working. It gives an error message:

initMap is not a function

, , .

, , script:

<script src="https://maps.googleapis.com/maps/api/js?key=<%= ENV["GOOGLE_MAPS_API_KEY"] %>&callback=initMap"
    async defer></script> -->

script :

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=<%= ENV['GOOGLE_MAPS_API_KEY'] %>" async defer></script>

"& callback = initMap". . .

, .

- , , Google ( js)?

Answer 1

rails 5 ( , )

= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
script[async defer src="https://maps.googleapis.com/maps/api/js?key=#{ENV['GOOGLE_MAP_API']}&callback=initMap"] 

js (map.coffee) :

jQuery ->

  window.initMap = ->
    # your map code here

Answer 2

Rails 5. , , , , .

, script. ( js (script) /app/assets/javascript.

@location, latitude longitude.

div id = #location-longitude ( HAML #location-longitude). div id = #location-latitude. div id javascript, , div. (, XML). , Google,

( , , HAML , javascript. , HAML .)

/ page title
%h1 Location with Dynamic Map 

%h3 Coordinates:

/ this div id is important.  The javascipt below looks for it and gets the inner value (= the value of @location.latitude )
#location-latitude
  #{@location.latitude}

/ this div id is also used by the javascript below
#location-longitude
  #{@location.longitude}


%h3 Dynamic Google Map:

/ this div id is where the javascript below will put the map
#map


  %script{ type: 'text/javascript'}
    var map;
    function initMap() {

    // assume we have a div with id 'location-latitude' that surrounds text that is the latitude
    var lat_value  = Number(document.getElementById('location-latitude').childNodes[0].nodeValue);

    // assume we have a div with id 'location-longitude' that surrounds text that is the longitude
    var long_value = Number(document.getElementById('location-longitude').childNodes[0].nodeValue);

    var coordinates = {lat: lat_value, lng: long_value};

    map = new google.maps.Map(document.getElementById('map'), {
    center: coordinates,
    zoom: 11
    });

    // now put a marker on the map, using the coordinates
    var marker = new google.maps.Marker({
    position: coordinates,
    map: map
    });
    }

  %script{ defer: 'async', src:"https://maps.googleapis.com/maps/api/js?key=#{YOUR_GOOGLE_API_KEY}&callback=initMap"}

Answer 3

, jQuery Rails 5. , , SO , , . , , .

1) window, initMap() , $(document).ready...

2) , I, <%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&v=3&callback=initMap", async: true, defer: true %>

, :

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

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

3) - . . , , vh.

#map_container {
  width: 100%;
  height: 100%;
}

#map {
  height: 100vh;
}

, , .

EDIT:

After publication, I sketched this code fragment: https://codepen.io/gabrieleromanato/pen/qEzKZY?editors=0110#0

I successfully tested it in a Rails 5 application by adding <%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&v=3" %>