CODEWITHSUNDEEP
javascriptjqueryruby-on-railsgoogle-maps
Paige
Paige

Reputation: 43

Google Map won't display when page accessed through Rails urlhelper generated link

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>

Upvotes: 1

Views: 334

Answers (1)

Arslan Ali
Arslan Ali

Reputation: 17802

'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.

Upvotes: 2

Related Questions