<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Photo du mois</title>
	<link rel="stylesheet" href="css/sls.css">
	 
    <link rel='stylesheet' href='css/lc_lightbox.min.css' />
    <link rel='stylesheet' href='css/open_close_fx.css' />
    <link rel='stylesheet' href='css/minimal.css' />
    <style>
   		#map{
		   width: 100%;
		   height: 400px;
	   		}
   </style>
	   
<?php include 'functions.php'; ?>

	<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7cAx3NSH4dPM3Sx2oQeud7Zr-KaGXmLk"></script>

</head>

<body>

	
<h1 class="_h1"><?php echo gettext("Photo du mois"); ?></h1>

<?php
	$page = 1;
	
	try {
		$conn4 = new PDO('sqlite:db_photo.sqlite3');
		$query4 = "SELECT filename, date, lens, exposure, iso, width, height, html, aperture, model, lat, long, alt, legende, copyright, titre, createur, keywords FROM photos WHERE lat != '' ORDER BY date DESC LIMIT ? OFFSET ?";
		//nb d'archive par page
		$limit = 13;
		$offset = $limit * ($page -1);
		//echo "offset: " . $offset;
	
		$stmt = $conn4->prepare($query4);
		$stmt->execute(array($limit, $offset));
		
		$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
		$rowcount = count($result);
		
		$conn4 = null;
		}
		catch(PDOException $e) {
			echo $e->getMessage();
			}
		
		_pr($result);
		
		$imgLat = $result[0]['lat'];
		$imgLng = $result[0]['long'];
?>

<script>
			var myCenter = new google.maps.LatLng(<?php echo $imgLat; ?>, <?php echo $imgLng; ?>);
			function initialize(){
				var mapProp = {
					center:myCenter,
					zoom:10,
					mapTypeId:google.maps.MapTypeId.ROADMAP
				};
			
				var map = new google.maps.Map(document.getElementById("map"),mapProp);
			
				var marker = new google.maps.Marker({
					position:myCenter,
					animation:google.maps.Animation.BOUNCE
				});
			
				marker.setMap(map);
			}
			google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div id="map"></div>

		
<p><em><small>@ 2022</small></em></p>
			
<script src='js/lc_lightbox.min.js'></script>
<script src='js/alloy_finger.min.js'></script>
			
</body>
			
</html>