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

Question

I have been trying for years to figure out how to use google maps in my Rails app. I am currently trying with Rails 5.

I have also been trying to figure out how to get my javascript to work in a production environment.

My most recent attempts at these challenges are outlined in this production issue post and this google maps post.

After a long codementor session, the production environment javascript problem seemed to have been solved by moving:

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

from out of the head tag to the end of the body tag.

However, in doing this, the google maps javascript now doesnt work. It gives an error that says:

initMap is not a function

I have seen many others raise this problem, including here.

I have tried the solution outlined in this post, which is to replace this script:

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

with this script in my address view file:

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

The key difference is the removal of "&callback=initMap". This gives no errors in the console inspector. However, it doesn't display a map either.

I have created a new problem by fixing the production issues.

Can anyone see what I need to do in order to get the google maps rendering (without breaking the production environment js)?

Answer 1

I have managed to get this to work on a rails 5 project with the following in the head (note this it slim syntax)

= 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"] 

Then inside a js file (map.coffee) I have the following:

jQuery ->

  window.initMap = ->
    # your map code here

Answer 2

I have this working in Rails 5. I wanted to post this so people can see how to pass in values to the map so that you can show the map at a particular coordinate, for example.

Here's a stripped down version of the view, which contains the script. (my next step will be to pull the js (script) code out and put it into /app/assets/javascript .

I have an object @location that will respond to latitude and longitude.

In the view below, I have a div with id = #location-longitude (in HAML it's written just as #location-longitude). I also have a div with id = #location-latitude. I use those div ids in the javascript to then get the value of the text that shows up within that div. You can use other ways of getting values (like via XML). This is really simple so that you can focus on getting the call to Google maps working

(Note that because HAML syntax is indention based, I couldn't nicely indent the javascript. When I did, HAML stuff complained.)

/ 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

I have just run into this issue using jQuery in a Rails 5 app. After trying to figure it for over an hour on my own I hit SO and tried a number of snippets that were confirmed working by others but I could no replicate. However, embodying the power of a few million monkeys typing I managed to achieve a working solution.

1) The callback works on the window object, so I had to place initMap() in this context and not within $(document).ready...

2) The page that I am using the map on I included <%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&v=3&callback=initMap", async: true, defer: true %>

So my view looks like this:

<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) The biggest hassle for me was the view. I couldn't get it to render without my height and width being in pixels. After trial and error modifying other suggestions, I stumbled upon using vh.

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

#map {
  height: 100vh;
}

Hopefully this helps others dealing with this.

EDIT:

After posting came across this codepen snippet: https://codepen.io/gabrieleromanato/pen/qEzKZY?editors=0110#0

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