109 lines
2.9 KiB
HTML
109 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
|
||
<head>
|
||
<title>Bootstrap</title>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
||
<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>
|
||
|
||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||
|
||
<style>
|
||
.bcontent {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
/*#maps { height:350px;width:498px; }*/
|
||
#maps { height:400px; width:638px; }
|
||
|
||
.modal-dialog {
|
||
height:400px; width:640px;
|
||
}
|
||
|
||
</style>
|
||
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container">
|
||
<h3>Show hide Modal Example Using jQuery</h3>
|
||
<!-- Button to Open the Modal -->
|
||
<!--button type="button" class="btn btn-success" id="show">
|
||
Open modal
|
||
</button-->
|
||
<a href="#" id="show">⚓</a>
|
||
|
||
<!-- The Modal -->
|
||
<div class="modal" id="myModal">
|
||
<!-- -modal-lg -modal-sm -->
|
||
<div class="modal-dialog modal-lg">
|
||
<div class="modal-content">
|
||
|
||
<!-- Modal Header -->
|
||
<div class="modal-header">
|
||
<h4 class="modal-title">Modal Heading</h4>
|
||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||
</div>
|
||
|
||
<!-- Modal body -->
|
||
<div class="modal-body" id="maps">
|
||
Modal body..
|
||
</div>
|
||
|
||
<!-- Modal footer -->
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-danger" id="hide">Close</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<script>
|
||
$("#show").click(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);
|
||
|
||
$('#myModal').modal('show', function(){
|
||
google.maps.event.trigger(map, "resize"); // resize map
|
||
map.setCenter(c); // set the center
|
||
}); // slide it down
|
||
});
|
||
|
||
$("#hide").click(function(){
|
||
$('#myModal').modal('hide');
|
||
});
|
||
|
||
</script>
|
||
</body>
|
||
</html> |