I have a present need to display a Google Map, inside a FancyBox. The tutorial shows how to do this in a straight-forward manner by using a "fancybox.iframe" CSS class, But I'll need my FancyBox to display more than just the map, ie. a form below.
So far, here's my code(very simple):
HTML
<div id="fancybox-container"></div>
CSS
#fancybox-container {
display: none;
width: 450px;
height: 500px;
border: 1px solid red;
padding: 3px;
overflow: hidden;
}
and finally some CoffeeScript:
$ ->
new FancyMap()
class FancyMap
constructor: ->
@openMap() #once fancybox is open proceed to render the map inside of it
options =
center: new google.maps.LatLng(6.191556, -75.579716)
zoom: 14
mapTypeId: google.maps.MapTypeId.ROADMAP
@map = new google.maps.Map $('#fancybox-container')[0], options
openMap: ->
$('a[href=#fancybox-container]').fancybox
maxWidth: 500
maxHeight: 550
fitToView: false
autoSize: true
closeClick: false
openEffect: 'none'
closeEffect: 'none'
window.FancyMap = FancyMap
The result of that, is almost what I want except that the rendering is messed up,
If I Drag the map inside, the result is.. something like this:
so, in conclusion, I'm certainly missing an important property or configuration, right? Can you help me solve this issue?
Infinite Thanks in advance,
Note. I have read and tried the similar Questions here, but I'm still unsuccessful. So I reduced my issue here to its simplest version.
Google Maps does this when it doesn't know how big its eventually going to be, for example if you assign it to the light box before opening it the map wont know what size it needs to be.
Rather than adding the map in the constructor try adding it to the callback which will fire when the box has opened.
Code example provided by "mu is too short"