<!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;
	   		}
		#mapCanvas {
			width: 100%;
			height: 650px;
		}
   </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);
?>

<div id="mapCanvas"></div>

<script>
		function initMap() {
			var map;
			var bounds = new google.maps.LatLngBounds();
			var mapOptions = {
				mapTypeId: 'roadmap'
			};
							
			// Display a map on the web page
			map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
			map.setTilt(100);
				
			// Multiple markers location, latitude, and longitude
			var markers = [
				<?php
					$a = "";
					for( $i = 0; $i < $rowcount; $i++) {
						$a .=  '["'.$result[$i]['filename'].'", '.$result[$i]['lat'].', '.$result[$i]['long'].'],' . "\r\n"; 
						} 
					$a = substr_replace($a, '', -3, 1);
					echo $a;
				?>
			];
								
			// Info window content
			var infoWindowContent = [
				<?php
					$b = "";
					for( $i = 0; $i < $rowcount; $i++) {
						$b .= '[\'<div class="info_content"><h3>' . $result[$i]['filename'] . '</h3><p>' . $result[$i]['lat'] . '</p></div>\'],' . "\r\n";				
						} 
					$b = substr_replace($b, '', -3, 1);
					echo $b;
				?>
			];
				
			// Add multiple markers to map
			var infoWindow = new google.maps.InfoWindow(), marker, i;
			
			// Place each marker on the map  
			for( i = 0; i < markers.length; i++ ) {
				
				var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
				bounds.extend(position);
				marker = new google.maps.Marker({
					position: position,
					map: map,
					icon: markers[i][3],
					title: markers[i][0]
				});
				
				// Add info window to marker   
				
				google.maps.event.addListener(marker, 'click', (function(marker, i) {
					return function() {
						infoWindow.setContent(infoWindowContent[i][0]);
						infoWindow.open(map, marker);
					}
				})(marker, i));
				
				
				// Center the map to fit all markers on the screen
				map.fitBounds(bounds);
			}
		
			// Set zoom level
			var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
				this.setZoom(6);
				google.maps.event.removeListener(boundsListener);
			});
		}
		
		// Load initialize function
		google.maps.event.addDomListener(window, 'load', initMap);
		</script>
		

		
<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>