1

I am new to Rails and having trouble understanding why my map won't display. My source is here and currently hosted here for testing purposes.

When I load the home page, and click on the button for the contact page, the google map will not show. However, if I access the contact page directly, the map will load just fine. After I've loaded the map correctly once, I can click around the site and keep the map (cached?).

I've located a lot of users having similar issues, some of which were fixed with a $(document).on('pageinit', function() .... style declaration, but this and other variants seem to be deprecated as of jquery 1.9.

Other users said they were able to fix the problem by attaching "rel='external'" to their nav bar links, but since I have generated the nav bar with urlhelper, this doesn't seem to be an option for me.

In lieu of an 'easy' fix, am I able to simply force a page refresh using my pages controller?

app/assets/javascripts/contact_map.js

var map;
$(document).ready(function initialize() {
  var bjlLoc = new google.maps.LatLng(40.7547655,-73.8048775);
  var mapOptions = {
    center: bjlLoc,
    zoom: 13
  };
  map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);
  var marker = new google.maps.Marker({
    position: bjlLoc,
    title: 'B.J. Laura & Son',
    map: map
  });
});

$(document).ready(function() {
  google.maps.event.trigger(map, 'resize');
});

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

app/assets/stylesheets/pages.scss

#contact-info{
  float: left;
  width: 300px;
}

#map-container{
  border: none;
  width: 650px;
  height: 400px;
  background-color: #ccc;
  margin-left: 325px;
  margin-right: 25px;
}

#mapcanvas{
  border: none;
  width: 650px;
  height: 400px;
}

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
<head>
  <%= yield :head %>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>

</head>
<body id="bdycontainer">
  <canvas id="blogo" width="1000" height="120">...</canvas>
  <nav>
    <ul id="navbar">
      <% [["Home", :root], ["About", :about], ["Contact", :contact]].each do |name,url| %>
      <li><%= link_to_unless_current(name, url) %></li>
    <% end %>
    </ul>
  </nav>
  <div id="content">
    <%= yield %>
  </div>

</body>
</html>

app/views/pages/contact.html.erb

<% content_for :head do %>
  <title>Contact B.J. Laura</title>
  <script src="https://maps.googleapis.com/maps/api/js"></script>

<% end %>

<br/>
<div id="contact-info">...</div>

<div id="map-container">
  <div id="mapcanvas"></div>
</div>

<br/>
<hr>
Paige
  • 43
  • 1
  • 6

1 Answers1

2

'data-turbolinks-track' => true is actually causing this problem. Turn off the data-trubolinks-track to use the Google maps API without having to refresh the page.

Arslan Ali
  • 17,418
  • 8
  • 58
  • 76
  • I went ahead and completely removed turbolinks from my project. It's working! Thank you! – Paige Jun 10 '15 at 20:48
  • You could also listen to the 'page:load' event (in addition to using `$(document).ready()`). [See this question](http://stackoverflow.com/questions/18770517/rails-4-how-to-use-document-ready-with-turbo-links) – Stephen Jun 10 '15 at 20:55
  • @Paige do have a look at the question mentioned by Stephen. That's how you can use Turbo-links with Google maps api. – Arslan Ali Jun 11 '15 at 07:41