Google Maps in Ruby on Rails JavaScript error

Question

I am trying to create a Ruby on Rails application with Google Maps integration.

My source:

<!DOCTYPE html>

<html>
    <head>
        <title>Website</title>
        <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
        <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
        <%= csrf_meta_tags %>

        <script src="https://maps.googleapis.com/maps/api/js"></script>

        <script type="text/javascript">

            function initialize() {

                var myLatlng = new google.maps.LatLng(56.794682, 25.224593);

                var mapOptions = {
                    zoom: 15,
                    center: myLatlng
                }

                var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: 'This is a location'
                });
            }

            google.maps.event.addDomListener(window, 'load', initialize);

        </script>

        <script type="text/javascript">

            ready = function() { 

                //Current page ID
                var page_id = $('div.content').attr('id');

                //Navigation list of all pages
                var navigation_list = $("nav#navigation a");

                //Navigation list check
                navigation_list.each(function(a){

                    if ($(this).attr('id') == page_id) {

                        $(this).css("border-bottom", "3px solid #74c5bd");
                    }
                });
            }

            $(document).ready(ready)
            $(document).on('page:load', ready)

        </script>
    </head>

    <body>

        <%= render "layouts/header" %>
        <%=yield %>
        <%= render "layouts/footer" %>

    </body>
</html>

Each time I load the screen I get a JavaScript error:

TypeError: null is not an object (evaluating 'a.offsetWidth')

Also, the map is not displayed. When I reload the page, the map finally appears and the JavaScript error vanishes.

Where is the problem and how do I fix it?

possible duplicate of [Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null](http://stackoverflow.com/questions/11740663/google-map-api-uncaught-typeerror-cannot-read-property-offsetwidth-of-null) — dimakura, Sep 28 '15 at 20:30

score 0 · Answer 1 · answered Sep 28 '15 at 20:39

What I believe is happening in your case is turbolinks is reloading the <body>, but not the <head>. Your custom script is running, but the google object is null. That's why the error clears after a full page refresh when the head is reloaded.

Without Turbolinks Quick Fix

Make the link that points to your map opt out of turbolinks. This forces a full page refresh when the link is clicked.

<div id="some-div" data-no-turbolink>
  # Link to your Map Page
</div>

With Turbolinks Fix

Turbolinks is pretty cool. You can still use it with google maps, you just need to see if google is defined. This method will load google maps asynchronously if it is undefined, otherwise it will just run your ready() method.

var loadMap = function() {
  if (typeof google === 'undefined' ) {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' + 'libraries=places&'+'callback=ready';
      document.body.appendChild(script);
  } else {
    ready();
  }
};

Then update the function call to:

$(document).ready(loadMap)
$(document).on('page:load', loadMap)

Take the map script out of the and put it in the . That should fix it, but consider putting your javascripts in the asset pipeline, as this is the standard practice. — JeffD23, Sep 28 '15 at 20:49

Google Maps in Ruby on Rails JavaScript error

1 Answers1