Strange issue after opening /new pages

[blubbomat]

Hi,

i got a strange issue. The map is loading normally. But after i opened for example locations/new and i will return to the map by a homepage link. The map will not load and followed javascript error occurs in the javascript console: Uncaught ReferenceError: google is not defined

The map will only load if i am reloading the page. If am browsing on other sides i can return to the page by a link without any problems. Just opening /new pages the problem occurs.

Do you have any ideas?

<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>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>  
<p id="notice"><%= notice %></p>
<br>
<div style='width: 800px;'>
  <div id="map" style='width: 835px; height: 600px;'></div>
</div>

<script type="text/javascript">
    handler = Gmaps.build('Google');
    handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
      markers = handler.addMarkers(<%=raw @hash.to_json %>);
      handler.bounds.extendWith(markers);
      handler.fitMapToBounds();
      google.maps.event.addListener(handler.getMap(), 'rightclick', function(event){
          var lat = event.latLng.lat();
          var lng = event.latLng.lng();
          if(confirm("Do you want to add a location here?")){
             window.location = "/locations/" + lat + "/" + lng + "/new.html";
          }
      });
    } );
</script>

[blubbomat]

Ok i did reproduce the error with a simple project.

I just did followed: rails new locationsproject rails generate scaffold Location name:string lat:float lng:float added gem 'gmaps4rails' in Gemfile added //= require underscore //= require gmaps/google in application.js added underscore.js in /vendor/assets/javascripts And edited the index.html.erb from location followed:

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

<p id="notice"><%= notice %></p>

<h1>Listing Locations</h1>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Lat</th>
      <th>Lng</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @locations.each do |location| %>
      <tr>
        <td><%= location.name %></td>
        <td><%= location.lat %></td>
        <td><%= location.lng %></td>
        <td><%= link_to 'Show', location %></td>
        <td><%= link_to 'Edit', edit_location_path(location) %></td>
        <td><%= link_to 'Destroy', location, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Location', new_location_path %>

<br>

<div style='width: 800px;'>
  <div id="map" style='width: 800px; height: 400px;'></div>
</div>

<script type="text/javascript">
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();
});

</script>

Now you create a new location with localhost:3000/locations/new this will redirect you to the show view of the created location. If you click that back button there the google map will not load. Javascript console will show google is not defined. The map will load by refreshing the page.

[apneadiving]

I dont use turbolinks, so I dont know how it works but its clearly weird.

Sorry I cant help.

[apneadiving]

reading their doc quickly , it seems you need to use:

$(document).on("ready page:load", nonIdempotentFunction);

so wrap your gmaps4rails code in a function and pass it instead of nonIdempotentFunction.

• turbolinks strongly recommends you to put all js into your head. Do so for google maps'

[blubbomat]

Ok a quick fix is by forcing the full page to reload with:

'data-no-turbolink' => true

I will try using the $(document)