155 lines
4.6 KiB
HTML
155 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
|
|
<!-- Head -->
|
|
<head>
|
|
{% include 'head.html' %}
|
|
<script src="https://maps.google.com/maps/api/js?key=AIzaSyBVRxoSLxgGg0ZzLDBKHz7n8dylAPHEkoM"
|
|
type="text/javascript"></script>
|
|
<script async type="text/javascript">
|
|
// On initialise la latitude et la longitude de Paris (centre de la carte)
|
|
var lat = {
|
|
{
|
|
lat
|
|
}
|
|
}
|
|
;
|
|
var lon = {
|
|
{
|
|
lon
|
|
}
|
|
}
|
|
;
|
|
var map = null;
|
|
var marker;
|
|
|
|
// Fonction d'initialisation de la carte
|
|
function initMap() {
|
|
// Créer l'objet "map" et l'insèrer dans l'élément HTML qui a l'ID "map"
|
|
map = new google.maps.Map(document.getElementById("map"), {
|
|
// Nous mettons la carte au centre avec les coordonnées
|
|
center: new google.maps.LatLng(lat, lon),
|
|
// Nous définissons le zoom par défaut (réglable in HTML)
|
|
zoom: 16,
|
|
// Nous activons en mode carte routière
|
|
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
|
// Nous activons les options de contrôle de la carte
|
|
mapTypeControl: true,
|
|
// Nous désactivons la roulette de souris
|
|
scrollwheel: false,
|
|
// Nous désactivons le déplacement sur la carte
|
|
draggable: false,
|
|
mapTypeControlOptions: {
|
|
// Cette option sert à définir comment les options se placent
|
|
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
|
|
},
|
|
// Activation des options de navigation dans la carte (zoom...)
|
|
navigationControl: true,
|
|
navigationControlOptions: {
|
|
// Comment ces options doivent-elles s'afficher
|
|
style: google.maps.NavigationControlStyle.ZOOM_PAN
|
|
}
|
|
});
|
|
marker = new google.maps.Marker({
|
|
map: map,
|
|
// Nous animons le marqueur en DROP
|
|
animation: google.maps.Animation.DROP,
|
|
// Nous définissons la position
|
|
position: {lat: {
|
|
{
|
|
lat
|
|
}
|
|
},
|
|
lng: {
|
|
{
|
|
lon
|
|
}
|
|
}
|
|
}
|
|
})
|
|
;
|
|
}
|
|
|
|
window.onload = function () {
|
|
// Fonction d'initialisation qui s'exécute lorsque le DOM est chargé
|
|
initMap();
|
|
};
|
|
</script>
|
|
<style type="text/css">
|
|
#map { /* la carte DOIT avoir une hauteur sinon elle n'apparaît pas */
|
|
height: 700px; /* The height is 400 pixels */
|
|
width: 100%; /* The width is the width of the web page */
|
|
}
|
|
</style>
|
|
</head>
|
|
<!-- End of Head -->
|
|
<body id="page-top">
|
|
|
|
<!-- Page Wrapper -->
|
|
<div id="wrapper">
|
|
|
|
<!-- Sidebar -->
|
|
{% include 'sidebar.html' %}
|
|
<!-- End of Sidebar -->
|
|
|
|
<!-- Content Wrapper -->
|
|
<div id="content-wrapper" class="d-flex flex-column">
|
|
|
|
<!-- Main Content -->
|
|
<div id="content">
|
|
|
|
<!-- Topbar -->
|
|
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
|
|
{% include 'topbar.html' %}
|
|
</nav>
|
|
<!-- End of Topbar -->
|
|
|
|
<!-- Begin Page Content -->
|
|
<div class="container-fluid">
|
|
|
|
{% if loc==0 %}
|
|
<!-- Page Heading -->
|
|
<div class="text-center">
|
|
<h3>Localisation du patient ({{town}})</h3>
|
|
<div id="map">
|
|
<!-- Ici s'affichera la carte -->
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if loc==1 %}
|
|
<!-- Page Heading -->
|
|
<div class="text-center">
|
|
<h3>Aucune donnée de localisation</h3>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
<!-- /.container-fluid -->
|
|
|
|
</div>
|
|
<!-- End of Main Content -->
|
|
|
|
<!-- Footer -->
|
|
{% include 'footer.html' %}
|
|
<!-- End of Footer -->
|
|
|
|
</div>
|
|
<!-- End of Content Wrapper -->
|
|
|
|
</div>
|
|
<!-- End of Page Wrapper -->
|
|
|
|
<!-- Scroll to Top Button-->
|
|
<a class="scroll-to-top rounded" href="#page-top">
|
|
<i class="fas fa-angle-up"></i>
|
|
</a>
|
|
|
|
<!-- Logout Modal-->
|
|
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
|
|
aria-hidden="true">
|
|
{% include 'auth/logout_modal.html' %}
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html> |