Wrapper div breaks google map in all IE versions

[glp]

I found out that the wrapper div:

<div class="<%= dom.container_class %>"> 
  <div id="<%= dom.map_id %>" class="<%= dom.map_class %>"></div>
</div>

breaks the map in all IE versions. The maps simply don't show at all.

I removed the div and everythings works (even 100%/100% maps). Tested on IE8 (all updates) on XP32 and IE9 (all updates) x86 and x64 on Windows 7 (x86 and x64)

New Template lines:

<div id="<%= dom.map_id %>" class="<%= dom.map_class %>"></div>

[apneadiving]

Wow.

Which wrapper is involved exactly?

Sent from my iPhone

On 23 mai 2012, at 10:52, Jörg Eiblreply@reply.github.com wrote:

I found out that the wrapper div:

<div class="<%= dom.container_class %>"> 
 <div id="<%= dom.map_id %>" class="<%= dom.map_class %>"></div>
</div>

breaks the map in all IE versions. The maps simply don't show at all.

I removed the div and everythings works (even 100%/100% maps).

Tested on IE8 (all updates) on XP32 and IE9 (all updates) x86 and x64 on Windows 7 (x86 and x64)

---

Reply to this email directly or view it on GitHub: https://github.com/apneadiving/Google-Maps-for-Rails/issues/217

[apneadiving]

Just tested on IE8. Works fine, I'd need more info then.

[glp]

I will gather all gems and the view involved and come back to you as soon as possible.

The outage occured about 6 days ago, before that everything worked perfectly. No code was changed though.

[apneadiving]

Thanks for this, I'm really interested in this issue.

Sent from my iPhone

On 24 mai 2012, at 14:53, Jörg Eiblreply@reply.github.com wrote:

I will gather all gems and the view involved and come back to you as soon as possible.

The outage occured about 6 days ago, before that everything worked perfectly. No code was changed though.

---

Reply to this email directly or view it on GitHub: https://github.com/apneadiving/Google-Maps-for-Rails/issues/217#issuecomment-5899304

[glp]

All gems I use:

gem 'rails', "~> 3.1.3"
gem 'pg', '0.11.0'
gem 'squeel'
gem 'kaminari'
gem 'meta_search'
gem 'jquery-rails'
gem 'haml'
gem 'devise', '~> 2.0.0'
gem 'devise_invitable', '~> 1.0.0'
gem 'cancan'
gem 'omniauth'
gem 'omniauth-twitter'
gem 'omniauth-facebook'
gem 'omniauth-google-oauth2'
gem 'simple_form'
gem 'validation_reflection'
gem 'cocoon'
gem 'gmaps4rails'
gem "geocoder"
gem 'country-select'
gem "acts_as_follower"
gem 'acts_as_commentable'
gem 'thumbs_up'
gem 'heroku'
gem 'carrierwave'
gem 'fog'
gem 'rmagick', :require => "RMagick"
gem 'dalli'
gem 'randumb'
gem 'sanitize'
gem "html5-rails", '~> 0.0.3'
gem 'acts-as-taggable-on', '~> 2.2.2'

group :assets do
  gem 'coffee-rails', '~> 3.1.1'
  gem 'uglifier', '>= 1.0.3'
  gem 'compass', '~> 0.12.alpha.4.8c84869'
  gem 'compass-rails'
  gem 'compass-h5bp', '~> 0.0.2'
  gem 'therubyracer', '~> 0.9.10'
  gem 'twitter-bootstrap-rails', :git => 'http://github.com/seyhunak/twitter-bootstrap-rails.git'
  gem 'sass-rails',   '~> 3.1.5'
end

Shortened Haml view, uses twitter bootstrap 2.0.3, non-fluid layout, responsive

%div.container{:role => 'main'}  
  %div.row
    %div.content.span9
      %div.alert.alert-info.well-shadow-outset.searchcontainer
        -#Stuff searching (forms etc.)
      #page.well.well-white.well-shadow-outset
        -#Map Menu
          %span.clearfix
        - if params[:lat] && params[:lng]
          = gmaps(:markers => { :data => @markers }, :map_options => {:libraries => [:places], :sensor => true, :zoom => 15, :minZoom => 2, :auto_adjust => false, :center_latitude => params[:lat], :center_longitude => params[:lng], :raw => '{mapTypeId: google.maps.MapTypeId.TERRAIN }'})
        -else
          = gmaps(:markers => { :data => @markers }, :map_options => {:libraries => [:places], :sensor => true, :zoom => 2, :minZoom => 2, :auto_adjust => false, :detect_location => true, :center_on_user => true, :raw => '{mapTypeId: google.maps.MapTypeId.TERRAIN }'})
      #markerscontent
        -#Rendering
      #paginator.well.well-white.well-shadow-outset
        -#Kaminari pagination

    %div.span3
      %div.well.well-white.well-small.well-shadow-outset
        -#Sidebar 

The css I used:

.map_container {
  margin: 0;
  width: 100%;
  height: 500px;
}

.gmaps4rails_map {
  position: relative;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

Old _gmaps4rails.html.erb

<% content_for :scripts do %>
<%= javascript_include_tag *js_dependencies %>

<script type="text/javascript" charset="utf-8">
<%=raw options.to_gmaps4rails %>
</script>
<% end %>

<% case dom.map_provider %>
<% when "mapquest" %>
<div id="<%= dom.map_id %>" style="width:750px; height:475px;">
  <!-- TODO: change this style dynamically -->  
</div>
<% when "bing" %>
  <div id="<%= dom.map_id %>" class="<%= dom.map_class %>"></div>
<% else %>
<div class="<%= dom.container_class %>"> 
  <div id="<%= dom.map_id %>" class="<%= dom.map_class %>"></div>
</div>
<% end %>

_gmaps4rails.html.erb overwrite

<% content_for :scripts do %>
<%= javascript_include_tag *js_dependencies %>

<script type="text/javascript" charset="utf-8">
<%=raw options.to_gmaps4rails %>
</script>
<% end %>

<% case dom.map_provider %>
<% when "mapquest" %>
<div id="<%= dom.map_id %>" style="width:750px; height:475px;">
  <!-- TODO: change this style dynamically -->  
</div>
<% when "bing" %>
  <div id="<%= dom.map_id %>" class="<%= dom.map_class %>"></div>
<% else %>
  <div id="<%= dom.map_id %>" class="<%= dom.map_class %>"></div>
<% end %>

If you want to check out the live version (currently open Beta): http://www.geopieces.com This version uses a new layout, but the error occurred on both views. I also didn't want to post the new layout because it uses jquery.layout.ui and is a bit more complex.

Hope we can figure this one out.

Cheers, and great gem by the way.

[apneadiving]

Just looked at your page.

Two js errors:

Message : Erreur d'exécution inconnue
Ligne : 2
Caractère : 32141
Code : 0
URI : http://geopieces.com/assets/application-29f32613a511f0b489580de7a2d28417.js

Which comes from e.innerHTML=a,d.appendChild(e)

The other one is:

Message : 'Gmaps' est indéfini.
Ligne : 6134
Caractère : 1
Code : 0
URI : http://geopieces.com/public/map

Which is logic: the application.js crashed on loading so Gmaps is undefined.

So I can't see any link with the div wrapper here.

BTW: you should really avoid including markers in the html. This causes your html to be too heavy. In this cases, I usually use:

• ajax load of json
• js templates for infowindows

[glp]

Thanks for the quick reply. I don't get those errors so I will investigate further.

[glp]

The errors only show in IE8. I will build a test application to reproduce this as clean as possible.

And I will replace the inline HTML with Mustache templates. Thanks for the tip!

[apneadiving]

Use of js templates is builtin the gem so it should be easy.

Keep in touch, I'm curious to know the final word about this.

[glp]

Yes, should be a breeze, but I like to make it DRY so I can kill all the other unnecessary templates.

After 2 days of cursing at IE I will definitely get to the bottom of this. I'll keep in touch, shouldn't be long.

Cheers

[apneadiving]

IE is a shared nightmare... :)

[apneadiving]

I guess no news = good news

[glp]

Kind of. I still need the wrappers disabled but I had no time to make a test case because we launch updates approx. every 3 days now. User response and filter phase. I still want to write a test case but I have no clue when exactly that will be.