0
Пожалуйста, посмотрите мое место для скрипки.google map with fancy box
http://jsfiddle.net/TECM4/231/
<div class="iframe_sec" style="height:160px;">
<a id="fancybutton" class="fancybox"><div id="map_canvas" style="height:100%; width: 100%;"></div></a>
</div>
Если нажать на карту, всплывающее окно откроется. Но я не могу щелкнуть внутри всплывающего окна. Если щелкнуть всплывающее окно, оно будет закрыто. Какова причина?? Как я могу это исправить??
фрагмент кода (от связанной скрипки):
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 < 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);.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;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<link href="http://yandex.st/jquery/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" />
<script src="http://yandex.st/jquery/fancybox/2.1.4/jquery.fancybox.min.js"></script>
<div class="iframe_sec" style="height:200px; width: 200px;">
<a id="fancybutton" class="fancybox">
<div id="map_canvas" style="height:100%; width: 100%;"></div>
</a>
</div>
Woops. Thanx. исправлено. – Akash
Очень быстрое и приятное решение. – ketan