Pan/Zoom not working in Chrome

[johncox00]

Embedded gmaps4rails map will not allow panning at all in Chrome (22.0.1229.79 on OS 10.8.1) and zoom will cause portions of the map image to disappear altogether. Firefox works perfectly.

[apneadiving]

Gmaps4rails has nothing particular. It's just the regular google js api + 2 html div.

I fear I can't do much. Did you check/correct your css?

Sent from my iPhone

On 2 oct. 2012, at 11:28, John Cox notifications@github.com wrote:

Embedded gmaps4rails map will not allow panning at all in Chrome (22.0.1229.79 on OS 10.8.1) and zoom will cause portions of the map image to disappear altogether. Firefox works perfectly.

— Reply to this email directly or view it on GitHub.

[johncox00]

Figured as much. CSS is pretty stock. Added a couple of lines to account for zoom/pan tools and info windows being distorted with Foundation. Will continue to look for a root cause. If anybody else is experiencing this irony, give a holler.

[TriKro]

I have the same issue. I thought it was because I was using responsive layout and resizing the map, but stupidly didn't check another browser. Unhappy. Not sure what I can do to help. :(

[TriKro]

Also not working in safari. Same issue. Using pan controls or dragging the map seems to result in no refresh of map. You pan onto blank space, yet the original content is fixed. It's almost like you're dragging around a photoshop mask.

[TriKro]

I found the issue for me. In bootstrap:

.container
  margin-right: auto
  margin-left: auto

For whatever reason, this was preventing pan and zoom from working correctly. Of course, very necessary for bootstrap to function. My basic haml structure

%html
  = render '/layouts/head'
  %body
    #wrap
      %content.container
        = render '/layouts/header'
        .container.main
          = yield
      #push
    = render '/layouts/footer'

Applying to just .content.main had no effect. So I patched with this:

content.container
  margin-right: 0
  margin-left: 0

Now working. Layout seems just fine. Haven't noticed any side effects yet.

[apneadiving]

@TriKro Thanks for sharing!

[jeffects]

I had the same issue with my Twitter Bootstrapped app. It is not rendering the controls correctly for both Firefox and Chrome. I am not sure why but deleting the comments under app/assets/stylesheets/application.css fixed my issue =/

[TriKro]

I think that's a different issue you can patch with this: https://github.com/apneadiving/Google-Maps-for-Rails/wiki/Google-Maps-with-Twitter-Bootstrap-or-Zurb-Foundation

[jeffects]

@TriKro ahh yes. That fixed it for me. Sorry, different issue from yours. Thanks for the help

[ghost]

If you use Foundation in your proyect, you can fix the problem adding this lines in the gmaps4rails.css:

img, object, embed { max-width: none !important; height: auto; }