Google map only loads after "refresh"

Question

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.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

    <!-- Google Maps API -->
    <%= javascript_include_tag "https://maps.googleapis.com/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.com/css?family=Droid+Sans|Lobster' rel='stylesheet' type='text/css'>
</head>

application.js

// This is a manifest file that'll be compiled 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
// compiled file.
//
// Read Sprockets README (https://github.com/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.org/

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

score 6 · Accepted Answer · edited May 23 '17 at 11:53

6

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

edited May 23 '17 at 11:53

Community

1
1

answered Oct 04 '13 at 16:54

ChrisBarthol

4,871
2
21
24

score 4 · Answer 2 · answered Mar 16 '15 at 23:47

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!

score 1 · Answer 3 · answered May 28 '14 at 17:50

This is a complex 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.

score 0 · Answer 4 · answered May 21 '15 at 10:41

0

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

answered May 21 '15 at 10:41

michal zagrodzki

236
5
5

score -1 · Answer 5 · answered Oct 30 '15 at 07:52

-1

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

answered Oct 30 '15 at 07:52

Amir Suhail

1
2

Google map only loads after "refresh"

5 Answers5