Update _test folder
This commit is contained in:
172
_test/maps/jquery.html
Normal file
172
_test/maps/jquery.html
Normal file
@@ -0,0 +1,172 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<title>Bootstrap</title>
|
||||
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7cAx3NSH4dPM3Sx2oQeud7Zr-KaGXmLk"></script>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family:Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
letter-spacing: 0.5px;
|
||||
color: #484848;
|
||||
}
|
||||
|
||||
/* Popup Open button */
|
||||
.open-button{
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.open-button:hover{
|
||||
}
|
||||
|
||||
.popup {
|
||||
position:fixed;
|
||||
top:0px;
|
||||
left:0px;
|
||||
background:rgba(0,0,0,0.75);
|
||||
width:100%;
|
||||
height:100%;
|
||||
display:none;
|
||||
}
|
||||
|
||||
/* Popup inner div */
|
||||
.popup-content {
|
||||
width: 700px;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
margin-top: 80px;
|
||||
box-shadow: 0px 2px 6px rgba(0,0,0,1);
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20px 0px;
|
||||
}
|
||||
|
||||
/* Popup close button */
|
||||
.close-button {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
position: absolute;
|
||||
top: -13px;
|
||||
right: -13px;
|
||||
border-radius: 20px;
|
||||
background: rgba(0,0,0,0.8);
|
||||
font-size: 25px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
background: rgba(0,0,0,1);
|
||||
}
|
||||
|
||||
#maps {
|
||||
height: 350px;
|
||||
width: 600px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
.popup-content {
|
||||
width:90%;
|
||||
}
|
||||
#maps {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
}
|
||||
/*#maps { height:350px;width:425px; display:none; }*/
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!--a class="open-button" href="javascript:void(0)"> Popup Preview</a-->
|
||||
<a href="#" class="open-button">⚓</a>
|
||||
|
||||
|
||||
<div class="popup">
|
||||
<div class="popup-content">
|
||||
<h3>Title of Popup </h3>
|
||||
<div id="maps"></div>
|
||||
<div class="content">Popup 1 content will be here. Lorem ipsum dolor sit amet,
|
||||
consectetur adipiscing elit. Aliquam consequat diam ut tortor
|
||||
dignissim, vel accumsan libero venenatis. Nunc pretium volutpat
|
||||
convallis. Integer at metus eget neque hendrerit vestibulum.
|
||||
</div>
|
||||
<a class="close-button" href="#">x</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
// create a center
|
||||
var c = new google.maps.LatLng(46.61211515,5.8780727);
|
||||
|
||||
//create map options object
|
||||
var mapOptions = {
|
||||
zoom: 11,
|
||||
center: c,
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP
|
||||
};
|
||||
|
||||
var map = new google.maps.Map(document.getElementById('maps'), mapOptions);
|
||||
|
||||
var marker = new google.maps.Marker({
|
||||
position: c,
|
||||
label: {
|
||||
text: "\ue0c8",
|
||||
fontFamily: "Material Icons",
|
||||
color: "#ffffff",
|
||||
fontSize: "20px",
|
||||
},
|
||||
animation: google.maps.Animation.DROP,
|
||||
title: "Material Icon Font Marker",
|
||||
});
|
||||
marker.setMap(map);
|
||||
|
||||
$(".open-button").click(function() {
|
||||
$(".popup").show(100,'linear', function(){
|
||||
google.maps.event.trigger(map, "resize"); // resize map
|
||||
map.setCenter(c); // set the center
|
||||
});
|
||||
});
|
||||
$(".close-button").click(function() {
|
||||
$(".popup").hide(100);
|
||||
});
|
||||
/*
|
||||
$('body').on('mouseup', function() {
|
||||
$('.popup').hide();
|
||||
});
|
||||
*/
|
||||
$( document ).on( 'keydown', function ( e ) {
|
||||
if ( e.keyCode === 27 ) { // ESC
|
||||
$(".popup").hide(100);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
54
_test/maps/popup_maps.html
Normal file
54
_test/maps/popup_maps.html
Normal file
@@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title></title>
|
||||
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7cAx3NSH4dPM3Sx2oQeud7Zr-KaGXmLk"></script>
|
||||
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
|
||||
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js" type="text/javascript"></script>
|
||||
<link href="https://code.jquery.com/ui/1.13.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<h3> jQuery UI demo </h3>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$("#btnShow").click(function () {
|
||||
$("#dialog").dialog({
|
||||
modal: true,
|
||||
title: "Google Map",
|
||||
width: 600,
|
||||
height: 450,
|
||||
/*
|
||||
buttons: {
|
||||
Close: function () {
|
||||
$(this).dialog('close');
|
||||
}
|
||||
},
|
||||
*/
|
||||
/*
|
||||
https://api.jqueryui.com/dialog/
|
||||
*/
|
||||
open: function () {
|
||||
var mapOptions = {
|
||||
center: new google.maps.LatLng(19.0606917, 72.83624970000005),
|
||||
zoom: 18,
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP
|
||||
}
|
||||
var map = new google.maps.Map($("#dvMap")[0], mapOptions);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<input id="btnShow" type="button" value="Show Maps" />
|
||||
<div id="dialog" style="display: none">
|
||||
<div id="dvMap" style="height: 380px; width: 580px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--iframe src="https://maps.google.com/maps?q=46.61211515,5.8780727&t=&z=11&ie=UTF8&iwloc=&output=embed" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe-->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user