Rails 5 - Google Maps - Javascript Error - Initmap Is Not A Function - Fixing One Js Issue Creates Another

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 javascrip

Solution 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

Solution 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 iswhere 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 latitudevar 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 longitudevar 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 coordinatesvar 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"}

Solution 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" %>