I am currently facing a challenge in displaying a Google Map within a FancyBox. While the tutorial provides a straightforward solution using a "fancybox.iframe" CSS class, I need my FancyBox to display more than just the map – specifically, a form below it.
Here is the simple code I have so far:
HTML
<div id="fancybox-container"></div>
CSS
#fancybox-container {
display: none;
width: 450px;
height: 500px;
border: 1px solid red;
padding: 3px;
overflow: hidden;
}
And lastly, 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 current outcome is not entirely what I intended as the rendering appears messy when the map is dragged around.
As a result, I believe there might be an essential property or configuration that I am overlooking. Can anyone offer assistance in resolving this issue?
Many thanks in advance,
Note. Despite exploring similar questions and attempting solutions, I have yet to achieve success. Hence, I have simplified my dilemma here to its basic form.