merloch Postado Janeiro 7, 2016 Denunciar Share Postado Janeiro 7, 2016 (editado) Sou novato como webdesing e estou enfretando um problema com um Popup do google maps. o erro é o seguinte, somente com o clique deveria aparece o popup, entretanto ele aparece mesmo sem clicar, poderia me ajuda? Segue o codigo abaixo: -----------------------------------------Pagina Html-------------------------------- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Map</title> <script src="js/diego.js"></script> <link rel="alternate stylesheet" type="text/css" href="css/diego.css"> <div> <a href="#popupMap" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Open Map</a> </div> </head> <body> <div data-role="popup" id="popupMap" data-overlay-theme="a" data-theme="a" data-corners="false" data-tolerance="15,15"> <a href="#" data-rel="back" class="ui-btn ui-btn-b ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a> <iframe src="map.html" width="480" height="320" seamless=""></iframe> </div> </body> </html> ----------------------------Map.html------------------------- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Map</title> <script> function initialize() { var myLatlng = new google.maps.LatLng( 51.520838, -0.140261 ); var myOptions = { zoom: 15, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map( document.getElementById( "map_canvas" ), myOptions ); } </script> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <style> html { height: 100%; overflow: hidden; } body { margin: 0; padding: 0; height: 100%; } #map_canvas { height: 100%; } </style> </head> <body onload="initialize()"> <div id="map_canvas"></div> </body> </html> -------------------------------------------------JS--------------------------------------------------- // popup examples $( document ).on( "pagecreate", function() { // The window width and height are decreased by 30 to take the tolerance of 15 pixels at each side into account function scale( width, height, padding, border ) { var scrWidth = $( window ).width() - 30, scrHeight = $( window ).height() - 30, ifrPadding = 2 * padding, ifrBorder = 2 * border, ifrWidth = width + ifrPadding + ifrBorder, ifrHeight = height + ifrPadding + ifrBorder, h, w; if ( ifrWidth < scrWidth && ifrHeight < scrHeight ) { w = ifrWidth; h = ifrHeight; } else if ( ( ifrWidth / scrWidth ) > ( ifrHeight / scrHeight ) ) { w = scrWidth; h = ( scrWidth / ifrWidth ) * ifrHeight; } else { h = scrHeight; w = ( scrHeight / ifrHeight ) * ifrWidth; } return { 'width': w - ( ifrPadding + ifrBorder ), 'height': h - ( ifrPadding + ifrBorder ) }; }; $( ".ui-popup iframe" ) .attr( "width", 0 ) .attr( "height", "auto" ); $( "#popupMap iframe" ).contents().find( "#map_canvas" ) .css( { "width" : 0, "height" : 0 } ); $( "#popupMap" ).on({ popupbeforeposition: function() { var size = scale( 480, 320, 0, 1 ), w = size.width, h = size.height; $( "#popupMap iframe" ) .attr( "width", w ) .attr( "height", h ); $( "#popupMap iframe" ).contents().find( "#map_canvas" ) .css( { "width": w, "height" : h } ); }, popupafterclose: function() { $( "#popupMap iframe" ) .attr( "width", 0 ) .attr( "height", 0 ); $( "#popupMap iframe" ).contents().find( "#map_canvas" ) .css( { "width": 0, "height" : 0 } ); } }); }); Editado Janeiro 7, 2016 por merloch Citar Link para o comentário Compartilhar em outros sites More sharing options...
Pergunta
merloch
Sou novato como webdesing e estou enfretando um problema com um Popup do google maps. o erro é o seguinte, somente com o clique deveria aparece o popup, entretanto ele aparece mesmo sem clicar, poderia me ajuda? Segue o codigo abaixo:
-----------------------------------------Pagina Html--------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Map</title>
<script src="js/diego.js"></script>
<link rel="alternate stylesheet" type="text/css" href="css/diego.css">
<div>
<a href="#popupMap" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Open Map</a>
</div>
</head>
<body>
<div data-role="popup" id="popupMap" data-overlay-theme="a" data-theme="a" data-corners="false" data-tolerance="15,15">
<a href="#" data-rel="back" class="ui-btn ui-btn-b ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
<iframe src="map.html" width="480" height="320" seamless=""></iframe>
</div>
</body>
</html>
----------------------------Map.html-------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Map</title>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng( 51.520838, -0.140261 );
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map( document.getElementById( "map_canvas" ), myOptions );
}
</script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>
html {
height: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#map_canvas {
height: 100%;
}
</style>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
-------------------------------------------------JS---------------------------------------------------
// popup examples
Editado por merloch$( document ).on( "pagecreate", function() {
// The window width and height are decreased by 30 to take the tolerance of 15 pixels at each side into account
function scale( width, height, padding, border ) {
var scrWidth = $( window ).width() - 30,
scrHeight = $( window ).height() - 30,
ifrPadding = 2 * padding,
ifrBorder = 2 * border,
ifrWidth = width + ifrPadding + ifrBorder,
ifrHeight = height + ifrPadding + ifrBorder,
h, w;
if ( ifrWidth < scrWidth && ifrHeight < scrHeight ) {
w = ifrWidth;
h = ifrHeight;
} else if ( ( ifrWidth / scrWidth ) > ( ifrHeight / scrHeight ) ) {
w = scrWidth;
h = ( scrWidth / ifrWidth ) * ifrHeight;
} else {
h = scrHeight;
w = ( scrHeight / ifrHeight ) * ifrWidth;
}
return {
'width': w - ( ifrPadding + ifrBorder ),
'height': h - ( ifrPadding + ifrBorder )
};
};
$( ".ui-popup iframe" )
.attr( "width", 0 )
.attr( "height", "auto" );
$( "#popupMap iframe" ).contents().find( "#map_canvas" )
.css( { "width" : 0, "height" : 0 } );
$( "#popupMap" ).on({
popupbeforeposition: function() {
var size = scale( 480, 320, 0, 1 ),
w = size.width,
h = size.height;
$( "#popupMap iframe" )
.attr( "width", w )
.attr( "height", h );
$( "#popupMap iframe" ).contents().find( "#map_canvas" )
.css( { "width": w, "height" : h } );
},
popupafterclose: function() {
$( "#popupMap iframe" )
.attr( "width", 0 )
.attr( "height", 0 );
$( "#popupMap iframe" ).contents().find( "#map_canvas" )
.css( { "width": 0, "height" : 0 } );
}
});
});
Link para o comentário
Compartilhar em outros sites
0 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.