Question

I had the gmaps4rails gem version 1.4.5 working nicely on my Rails 3.2.2 app. I just grabbed the example infobox setup that was described in the 1.4.5 documentation at the time. Looked beautiful!

So I finally get around to checking it on IE8, and the infobox’s background is absent, on Safari and Firefox I get a nice yellow with %75 opacity, on IE8 I get NO background at all.

After futzing around with the CSS, I gave up, and decided to grab the latest version of gmaps4rails 1.4.8. I notice it now supports the google infobox.js plugin. So I track it down, and find there are multiple versions, not knowing which version works with gmaps4rails 1.4.8, I choose infobox.js 1.9, the latest.

So I stick it in the app/assets/googlemaps.js manifest like so:

//= require infobox.js
//= require ./gmaps4rails.base.js.coffee
//= require ./gmaps4rails.googlemaps.js.coffee

I’ve tried several different permutations of when the infobox.js get’s included.

I fire the whole thing off like so in usamap.html.erb:

<%= javascript_include_tag "lbrokers" %>
<%= gmaps("markers" => {"data" => @json, "options" => {"custom_infowindow_class" => "infobox", "auto_adjust"=>false}}) %>

With the lbrokers.js manifest looking like:

//= require gmaps4rails/googlemaps.js

When I hit that page, I get this:

google is not defined
http://localhost:3000/assets/infobox.js?body=1
Line 128

It was several months between the time I initially set up gmaps4rails, and now. Even though I installed the 1.4.8 Gem, what I REALLY did was just grab the gmaps4rails.base.js.coffee and gmaps4rails.googlemaps.js.coffee from gmaps4rails 1.4.8 on Github and pasted their contents into the previous files in app/assets/javascripst/gmaps4rails. This is the layout file rendered prior to calling usamap.html.erb:

<% content_for :html_foot do %>
  <%= yield :scripts %>
  <script type="text/javascript">
  $(document).ready(function() {
    var centerpoint = new google.maps.LatLng(38, -97);
    gMap = new google.maps.Map(document.getElementById('map')); 
    gMap.setCenter(centerpoint);
  });
  Gmaps.map.infobox = function(boxText) {
    return {
      content: boxText
      ,disableAutoPan: false
      ,maxWidth: 0
      ,pixelOffset: new google.maps.Size(-140, 0)
      ,zIndex: null
      ,boxStyle: { 
      background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/examples/tipbox.gif') no-repeat"
        ,opacity: 0.75
        ,width: "380px"
      }
      ,closeBoxMargin: "10px 2px 2px 2px"
      ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
      ,infoBoxClearance: new google.maps.Size(1, 1)
      ,isHidden: false
      ,pane: "floatPane"
      ,enableEventPropagation: false
   }};  
   </script>
<% end %>

That’s the same infobox setup that worked fine on gmaps4rails 1.4.5. Now that I’m using the infobox.js plugin, noworky!

I have gone way wrong somewhere, either infobox.js 1.9 was the wrong choice.
Or I screwed up by just copying the two gmaps4rails coffee scripts and pasting them in app/assets/javascripts/gmaps4rails.

Or ?????

Anybody?

Answer 1

I have solved this for now by putting

    <script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js"></script>

In the view’s layout, and removing the

//= require infobox.js

From the manifest that was being used in the view where the map is shown. I was copying and pasting the various versions of infobox.js into my local copy and serving via the assets pipeline.

The background is still absent on IE8, but I’m using infobox 1.1.9, and there are later versions, hopefully they will fix the missing background.

I first noticed that the previously working gmaps4rails 1.4.5 setup stopped working when I upgraded from 1.4.5 to 1.4.6. So I put 1.4.5 back and carried on. When I noticed the IE8 missing infowindow background, gmaps4rails was by then at 1.4.8, and it acted the same as the attempted 1.4.6 upgrade. I can only assume that something changed between 1.4.5 and 1.4.6, requiring that you load the infobox.js plugin.

One other minor point, in 1.4.5 clustering was on by default, in 1.4.8 it’s off by default, you have to turn it on by passing the option “do_clustering”=>true to the “markers” option hash.