Turbolinks best practices

jonathanng commented 10 years ago

I'm using Turbolinks, which is standard for Rails 4.

When I do a full reload refresh, the page works fine, but if I'm coming from another page, I'm getting the the dreaded "Uncaught ReferenceError: google is not defined".

On the bottom of my show.html.haml, I have:

%script{ src:'//maps.google.com/maps/api/js?v=3.13&sensor=true&libraries=geometry', type:'text/javascript' }
%script{ src:'//google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/src/richmarker-compiled.js', type:'text/javascript'}
%script{ src:'//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js', type:'text/javascript'}
%script{ src:'//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js', type:'text/javascript'}
:coffee
    class RichMarkerBuilder extends Gmaps.Google.Builders.Marker

    #
    #           create_marker: ->
    #               options = _.extend @marker_options(), @rich_marker_options()
    #               @serviceObject = new RichMarker options
    #
    #           rich_marker_options: ->
    #               boxText = document.createElement("div")
    #               boxText.setAttribute("class", 'yellow')
    #               boxText.innerHTML = @args.infowindow
    #               _.extend(@marker_options(), { content: boxText })
    #
    #           create_infowindow: ->
    #               return null unless _.isString @args.infowindow
    #
    #               boxText = document.createElement("div")
    #               boxText.setAttribute("class", 'yellow') #to customize
    #               boxText.innerHTML = @args.infowindow
    #               @infowindow = new InfoBox(@infobox(boxText))
    #
    #               @bind_infowindow()
    #
    #           infobox: (boxText)->
    #               content: boxText
    #               pixelOffset: new google.maps.Size(-140, 0)
    #               boxStyle:
    #                   width: "280px"
    #

    handler = Gmaps.build 'Google', { builders: { Marker: RichMarkerBuilder}, markers: { maxRandomDistance: null } }

    handler.buildMap
        provider: {}
        internal:
            id: "l_map"
    , ->
        markers = handler.addMarkers([#{raw p.marker.to_json}])
        handler.bounds.extendWith markers
        handler.fitMapToBounds()
        handler.getMap().setZoom #{Settings.LOCATIONS_DEFAULT_ZOOM}

Wouldn't it be easier just to add these javascript files to the asset pipeline like we do with gmaps/google?

aok617 commented 10 years ago

I had this before. You can set data_no_turbolinks => false in your 'back' and redirect link options

jonathanng commented 10 years ago

I was kind of hoping to use Turbolinks.

It was working with this fork before:

https://github.com/fiedl/Google-Maps-for-Rails.git

apneadiving commented 10 years ago

There is nothing more to do with gmaps4rails than with other js resources.

I dont know turbolinks (and I wont dig, it's a terrible idea... Ok it's not the debate).

Basically insert google scripts in all your pages, you'll be fine.

jonathanng commented 10 years ago

That works. Thanks!

abatko commented 10 years ago

Is this what you mean by "insert google scripts in all your pages"?

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html lang="en">
<%= render partial: 'layouts/html_head' %>
<body>

<div class="container">

        <%= render partial: 'layouts/navbar' %>

        <%= yield %>

</div><!-- /.container -->

<%= javascript_include_tag "application", "data-turbolinks-track" => true %>

<script src="//maps.google.com/maps/api/js?v=3.14&amp;sensor=false&amp;libraries=geometry" type="text/javascript"></script>
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.1.2/src/markerclusterer_packed.js" type="text/javascript"></script>

</body>
</html>

app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require turbolinks
//= require bootstrap
//= require lodash.underscore
//= require gmaps/google
//= require_tree .

apneadiving commented 10 years ago

Yes.

apneadiving / Google-Maps-for-Rails

Turbolinks best practices #390