google map with fancy box
<p>Please see my fiddle location.</p>

<p><a href="http://jsfiddle.net/TECM4/231/" rel="nofollow">http://jsfiddle.net/TECM4/231/</a></p>

<pre><code>&lt;div class="iframe_sec" style="height:160px;"&gt;
&lt;a id="fancybutton" class="fancybox"&gt;&lt;div id="map_canvas" style="height:100%; width: 100%;"&gt;&lt;/div&gt;&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>If we click the map, the popup will open. But I can not click inside popup. If I click popup will close. What is the reason?? How can I fix this??</p>

<p><strong>code snippet (from linked fiddle):</strong></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function initialize() {
  var goo = google.maps
  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 10,
    center: new google.maps.LatLng(-33.92, 151.25)
  });
  var locations = [
    ['Gautham Beach', -33.92, 151.25]
  ];
  var infowindow = new google.maps.InfoWindow();
  var marker, i;
  for (i = 0; i &lt; locations.length; i++) {
    marker = new google.maps.Marker({
      icon: 'http://maps.google.com/mapfiles/ms/icons/purple-dot.png',
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map
    });
    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
    google.maps.event.addListener(marker, 'mouseout', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.close(map, marker);
      }
    })(marker, i));
    /* in reponsive plave the map pointer in center */
    $(window).on('resize', function() {
      var currCenter = map.getCenter();
      google.maps.event.trigger(map, 'resize');
      map.setCenter(currCenter);
    })
  }
  $('#fancybutton')
    .prop({
      disabled: false
    })
    .click(function() {
      $.fancybox(map.getDiv(), {
        openEffect: 'elastic',
        openSpeed: 150,

        closeEffect: 'elastic',
        closeSpeed: 150,

        closeClick: true,
        width: 600,
        height: 400,
        margin: 50,
        autoSize: true,
        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'));
        }
      });

    });
}

google.maps.event.addDomListener(window, 'load', initialize);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.fancybox-skin {
  position: relative;
  background: #f9f9f9;
  color: #444;
  text-shadow: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  height: 100%!important;
  width: 97.5%!important;
}
.fancybox-opened {
  z-index: 8030;
  width: 1170px!important;
  height: 490px!important;
}
.fancybox-outer,
.fancybox-inner {
  position: relative;
  height: 100%!important;
}
.fancybox-inner {
  overflow: hidden;
  width: 100%!important;
  height: 100%!important;
}
.fancybox-image,
.fancybox-iframe {
  display: block;
  width: 100%;
  height: 100%;
}
.fancybox-image {
  max-width: 100%;
  max-height: 100%;
}
@media only screen and (max-width: 1200px) {
  .fancybox-opened {
    width: 81%!important;
    margin: auto;
    left: 0!important;
    right: 0!important;
  }
}
@media only screen and (max-width: 500px) {
  .fancybox-opened {
    width: 78%!important;
    margin: auto;
    left: 0!important;
    right: 0!important;
  }
}
@media only screen and (max-width: 420px) {
  .fancybox-opened {
    padding: 10px;
    box-shadow: rgba(0, 0, 0, 0.498039) 0px 10px 25px;
    background: rgb(255, 255, 255);
    height: 80vh!important;
  }
  .fancybox-opened .fancybox-skin {
    width: 100%!important;
    height: 100%!important;
    padding: 0!important;
    box-shadow: none;
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp"&gt;&lt;/script&gt;
&lt;link href="http://yandex.st/jquery/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" /&gt;
&lt;script src="http://yandex.st/jquery/fancybox/2.1.4/jquery.fancybox.min.js"&gt;&lt;/script&gt;
&lt;div class="iframe_sec" style="height:200px; width: 200px;"&gt;
  &lt;a id="fancybutton" class="fancybox"&gt;
    &lt;div id="map_canvas" style="height:100%; width: 100%;"&gt;&lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>