Unable to render gmaps4rails map

Question

Ok, I've been trying for several hours to render a google map with gmaps4rails and I'm unable to figure it out, so I was hoping to get some ideas here. I think I'm pretty close though.

Here's what I've done:

• Went through the setup steps on github: https://github.com/apneadiving/Google-Maps-for-Rails
• Noticed the gmaps4rails method call in my view adds some JS code in the markup, so I put a breakpoint on the JS call to Gmaps.load_map(). Within this method, I set a breakpoint on Gmaps.map.initialize(). At this point a blank div area (where the map is to be rendered) is shown in my page, but when I step through this line the area is hidden (in particular during the map creation within the initialize is where the hiding happens: return new google.maps.Map(document.getElementById(this.map_options.id), mergedOptions)). The next line after that is a call for the map markers that is provided an array of lat/lng objects that kind of looks like this: Gmaps.map.markers = [{"lat":90.2765777,"lng":-37.7498712}], so basically it's leading me to think that my gmaps model object is fine (I also put a breakpoint in my controller for kicks and double checked that the call for my mappable object's to_gmaps4rails() is returning the appropriate data).
• Also noticed several calls to the google maps api in my firebug network tab (calls to maps.gstatic.com, mt0.googleapi.com, and maps.googleapi.com are made).
• Made sure the gmaps4rails css files are being downloaded into my browser session (I am getting gmaps4rails.css).
• Tried at some point to add a script tag on my view with the google api key, but later found out I don't really need it with the latest version, as explained here: Google Maps API-Key in gmaps4rails
• Did some searching on SO for similar questions and found these to no avail: gmaps4rails not showing map, gmaps4rails is not displaying the map

I think I'm missing something really simple, since the data seems to be in place for the map to be rendered. Any ideas?

Answer 1

It turned out to be that I was wrapping the gmaps4rails' map_container div within my own map div and that was throwing off gmaps4rails. I assume gmaps4rails' JS logic inserts and depends on its own div#map. So basically DO NOT wrap your gmaps4rails call in a div with id="map".

In my haml, I had this:

#map
  = gmaps4rails(@mapData)

When I just needed to have this:

= gmaps4rails(@mapData)

Or:

#foo
  = gmaps4rails(@mapData)