81 lines
2.6 KiB
PHP
81 lines
2.6 KiB
PHP
<?php
|
|
require_once 'db/config.php';
|
|
|
|
try {
|
|
$pdo = db();
|
|
$stmt = $pdo->query('SELECT name, latitude, longitude, description FROM restaurants');
|
|
$restaurants = $stmt->fetchAll();
|
|
} catch (PDOException $e) {
|
|
// For development, you might want to log this error.
|
|
// For production, you could show a generic error message.
|
|
error_log('Database error: ' . $e->getMessage());
|
|
$restaurants = []; // Ensure restaurants is an empty array on error
|
|
}
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WebSummit Restaurants Map</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#map {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
|
|
<script>
|
|
const restaurants = <?php echo json_encode($restaurants, JSON_NUMERIC_CHECK); ?>;
|
|
|
|
function initMap() {
|
|
const webSummitLocation = { lat: 38.7686, lng: -9.0940 };
|
|
const map = new google.maps.Map(document.getElementById("map"), {
|
|
zoom: 15,
|
|
center: webSummitLocation,
|
|
});
|
|
|
|
const webSummitMarker = new google.maps.Marker({
|
|
position: webSummitLocation,
|
|
map: map,
|
|
icon: 'https://img.icons8.com/color/48/000000/filled-star.png',
|
|
title: "Web Summit @ MEO Arena"
|
|
});
|
|
|
|
const infoWindow = new google.maps.InfoWindow();
|
|
|
|
webSummitMarker.addListener('click', () => {
|
|
infoWindow.setContent("<b>Web Summit @ MEO Arena</b>");
|
|
infoWindow.open(map, webSummitMarker);
|
|
});
|
|
|
|
restaurants.forEach(restaurant => {
|
|
const marker = new google.maps.Marker({
|
|
position: { lat: restaurant.latitude, lng: restaurant.longitude },
|
|
map: map,
|
|
title: restaurant.name
|
|
});
|
|
|
|
marker.addListener('click', () => {
|
|
let content = `<b>${restaurant.name}</b>`;
|
|
if (restaurant.description) {
|
|
content += `<br>${restaurant.description}`;
|
|
}
|
|
infoWindow.setContent(content);
|
|
infoWindow.open(map, marker);
|
|
});
|
|
});
|
|
}
|
|
</script>
|
|
<script async defer
|
|
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzZ8gdqKEbb2BaQxSeccfE97wjfl46Ruw&callback=initMap">
|
|
</script>
|
|
</body>
|
|
</html>
|