Pesquisar na Comunidade
Mostrando resultados para as tags ''popup google maps''.
Encontrado 2 registros
-
t 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> -------------------------------------------------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 } ); } }); });
-
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 } ); } }); });
