My Rails 4 app runs coffee script to draw a Google Map. At first glance, it appears to not be functional. However, when I hit the browsers refresh button, the map loads like a champ. This has been tested and is happening on:
- Mobile Safari (iOS7)
- Desktop Safari (OSX)
- Chrome (OSX)
- Chrome (Windows 7)
Header from application.html.erb
<head>
<!-- Boilerplate -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<%= stylesheet_link_tag "normalize.min.css" %>
<%= stylesheet_link_tag "main.css" %>
<%= javascript_include_tag "vendor/modernizr-2.6.2-respond-1.1.0.min.js" %>
<!-- Icon Font -->
<link href="//netdna.bootstrapcdn/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<!-- Google Maps API -->
<%= javascript_include_tag "=*********&sensor=true" %>
<!-- Rails -->
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<link href='+Sans|Lobster' rel='stylesheet' type='text/css'>
</head>
application.js
// This is a manifest file that'll be piled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// piled file.
//
// Read Sprockets README () for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require turbolinks
//= require_tree .
locations.js.coffee
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: /
initialize = ->
mapOptions =
center: new google.maps.LatLng(33.51976, -101.95781)
zoom: 16
mapTypeId: google.maps.MapTypeId.ROADMAP
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions)
myLatlng = new google.maps.LatLng(33.51976, -101.95781);
marker = new google.maps.Marker(
position: myLatlng
map: map
title: "Hello World!"
)
contentString = "<div id=\"info_content\">" + "<h3>Mighty Wash Amazing Autobath</h3>" + "<ul>" + "<li>6506 82nd Street, Lubbock, Texas 79424</li>" + "<li>806.553.0722</li>" + "<li>8:00am - 9:00pm</li>" + "</ul>" + "</div>"r
infowindow = new google.maps.InfoWindow(content: contentString)
google.maps.event.addListener marker, "click", ->
infowindow.open map, marker
infowindow.open(map, marker)
google.maps.event.addDomListener window, "load", initialize
locations/index.html.erb
<div id="map-canvas"/>
My Rails 4 app runs coffee script to draw a Google Map. At first glance, it appears to not be functional. However, when I hit the browsers refresh button, the map loads like a champ. This has been tested and is happening on:
- Mobile Safari (iOS7)
- Desktop Safari (OSX)
- Chrome (OSX)
- Chrome (Windows 7)
Header from application.html.erb
<head>
<!-- Boilerplate -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<%= stylesheet_link_tag "normalize.min.css" %>
<%= stylesheet_link_tag "main.css" %>
<%= javascript_include_tag "vendor/modernizr-2.6.2-respond-1.1.0.min.js" %>
<!-- Icon Font -->
<link href="//netdna.bootstrapcdn./font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<!-- Google Maps API -->
<%= javascript_include_tag "https://maps.googleapis./maps/api/js?key=*********&sensor=true" %>
<!-- Rails -->
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<link href='http://fonts.googleapis./css?family=Droid+Sans|Lobster' rel='stylesheet' type='text/css'>
</head>
application.js
// This is a manifest file that'll be piled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// piled file.
//
// Read Sprockets README (https://github./sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require turbolinks
//= require_tree .
locations.js.coffee
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript/
initialize = ->
mapOptions =
center: new google.maps.LatLng(33.51976, -101.95781)
zoom: 16
mapTypeId: google.maps.MapTypeId.ROADMAP
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions)
myLatlng = new google.maps.LatLng(33.51976, -101.95781);
marker = new google.maps.Marker(
position: myLatlng
map: map
title: "Hello World!"
)
contentString = "<div id=\"info_content\">" + "<h3>Mighty Wash Amazing Autobath</h3>" + "<ul>" + "<li>6506 82nd Street, Lubbock, Texas 79424</li>" + "<li>806.553.0722</li>" + "<li>8:00am - 9:00pm</li>" + "</ul>" + "</div>"r
infowindow = new google.maps.InfoWindow(content: contentString)
google.maps.event.addListener marker, "click", ->
infowindow.open map, marker
infowindow.open(map, marker)
google.maps.event.addDomListener window, "load", initialize
locations/index.html.erb
<div id="map-canvas"/>
5 Answers
Reset to default 6This sounds a lot like Rails javascript only works after reload. The suggested solution is to wrap your coffeescript with:
ready = ->
// functions
$(document).ready(ready)
$(document).on('page:load', ready)
Easiest fix!
On the link used to visit your page with the map, simply add data-no-turbolink
example:
<a href="/contactuspage" data-no-turbolink>Contact Us</a>
Problem Solved! I spent days trying to find an easy resolution to this problem. Hope it helps!
This is a plex problem and has something to do caching of javascript when using Turbolinks in Rails 4 (Turbolinks is now enabled for all internal links by default).
You can force a particular url to load without turbolinks by specifying 'data-no-turbolink' => true in links to this page.
For example, I ran into this problem using the gmaps4rails plugin, and resolved it by making sure I linked to the map page with the following url:
link_to 'Map', maps_path, 'data-no-turbolink' => true
Turbolinks seems to be a controversial addition to Rails in general, and you can turn it off globally if you don't care about the performance improvements it offers.
Adding bit of advice to Philip Duffney response:
If anything else does not work, add value 'data: { no_turbolink: true }' to link which leads to target page.
Example:
<%= link_to(locations, data: { no_turbolink: true } ) do %>
just add this code before close head tag . Or add in your theme -> Custom Script Section:
jQuery(document).trigger('gmpBeforePrepareToDraw');
now your map is loaded properly. you don't need to refresh it again. :)
Regards
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1743873005a4521791.html
评论列表（0条）