Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Turbolinks best practices #390

Closed
jonathanng opened this issue Oct 29, 2013 · 6 comments
Closed

Turbolinks best practices #390

jonathanng opened this issue Oct 29, 2013 · 6 comments

Comments

@jonathanng
Copy link

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

aok617 commented Oct 29, 2013

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

@jonathanng
Copy link
Author

I was kind of hoping to use Turbolinks.

It was working with this fork before:

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

@jonathanng jonathanng mentioned this issue Oct 29, 2013
Open
@apneadiving
Copy link
Owner

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
Copy link
Author

That works. Thanks!

@abatko
Copy link

abatko commented Jan 24, 2014

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
Copy link
Owner

Yes.

@apneadiving apneadiving mentioned this issue Nov 4, 2014
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@abatko @apneadiving @jonathanng @aok617