move google map into fancybox

see: http://stackoverflow.com/questions/18339548/i-need-solutions-for-thumb-map-and-big-map-but-without-loading-google-map-twice/18341194#18341194

by Newton Anbarasu

HTML

<script src="http://yandex.st/jquery/fancybox/2.1.4/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="http://yandex.st/jquery/fancybox/2.1.4/jquery.fancybox.css">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;.js"></script>
<input type="button" disabled id="fancybutton" value="open fancybox" />
<div style="width:200px;height:200px">
    <div id="map_canvas" style="width:100%;height:100%"></div>
</div>

JavaScript

function initialize() {
          var goo = google.maps,
              mapOptions = {
                  zoom: 14,
                  center: new goo.LatLng(52.5498783, 13.425209099999961),
                  mapTypeId: goo.MapTypeId.ROADMAP,
                  disableDefaultUI:true
              },
              map = new goo.Map(document.getElementById('map_canvas'),
              mapOptions),
              marker = new goo.Marker({
                  map: map,
                  position: map.getCenter()
              });

          $('#fancybutton')
              .prop({
              disabled: false
          })
              .click(function () {

              $.fancybox(map.getDiv(),

              {
                  width: 600,
                  height: 400,
                  margin:50,
                  autoSize: false,
                  afterShow: function (a, z) {
                      map.setOptions({
                          disableDefaultUI: false
                      })
                      goo.event.trigger(map, 'resize');
                      map.setCenter(this.content.data('center'));
                  },

                  beforeLoad: function (a) {
                      this.content.data({
                          parent: this.content.parent(),
                          center: map.getCenter()
                      })
                  },

                  beforeClose: function () {
                      this.content.data({
                          center: map.getCenter()
                      })

                  },
                  afterClose: function () {
                      map.setOptions({
                          disableDefaultUI: true
                      })
                      this.content.appendTo(this.content.data('parent')).show();
                      goo.event.trigger(map, 'resize');
                      map.setCenter(this.content.data('center'));
                  }
              });

          });




      }

     ...