Clever Geek Handbook

Rails 4: ReferenceError: Gmaps not defined

I am trying to embed gmap in my webpage and no matter what I always get ReferenceError: Gmaps is not defined

. Here's what I've done so far:

  • added gem 'gmaps4rails'

    , installation package started, server rebooted
  • added underline to "app / assets / javascript" folder
  • added //= require underscore //= require gmaps/google

    to my application.js
  • edited app and my html view (code below)
  • added custom js file named Gmap.js to app / assets / javascript folder (code below)

my application.html.erb (head only):

<head>
  <title><%= @page_title %></title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
  <script src="//maps.google.com/maps/api/js?v=3.13&amp;sensor=false&amp;libraries=geometry" type="text/javascript"></script>
  <script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js' type='text/javascript'></script>
  <%= yield :scripts %>
</head>

my index.html.erb

<div class="col-xs-6">
        <div style='width: 800px;'>
            <div id="map" style='width: 800px; height: 400px;'></div>
        </div>
    </div>
    <br />
</div>

my gmap.js

handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
  markers = handler.addMarkers([
    {
      "lat": 0,
      "lng": 0,
      "picture": {
        "url": "https://addons.cdn.mozilla.net/img/uploads/addon_icons/13/13028-64.png",
        "width":  36,
        "height": 36
      },
      "infowindow": "hello!"
    }
  ]);
  handler.bounds.extendWith(markers);
  handler.fitMapToBounds();
});

Am I missing something obvious here? thanks for the help

Here's a GitHub repo of it all. The corresponding filenames are in the message.

+3


source to share


2 answers


In your layout file make sure you include the js in the section and not at the bottom in the footer



0


source


I faced the same problem and in my application.js I need the javascripts to be called in a specific order. May this help someone else



//= require vendor/underscore-min
//= require gmaps/google
//= require remastering/find_us
0


source






More articles:


All Articles