113 lines
3.4 KiB
PHP
113 lines
3.4 KiB
PHP
<?php
|
|
$restaurants = [
|
|
[
|
|
"name" => "Restaurante D'Bacalhau",
|
|
"latitude" => 38.77124,
|
|
"longitude" => -9.09244,
|
|
"description" => "Specializing in codfish (bacalhau)."
|
|
],
|
|
[
|
|
"name" => "Cantinho do Avillez",
|
|
"latitude" => 38.7685,
|
|
"longitude" => -9.0953,
|
|
"description" => "Contemporary Portuguese cuisine with international influences."
|
|
],
|
|
[
|
|
"name" => "Fifty Seconds",
|
|
"latitude" => 38.774743,
|
|
"longitude" => -9.091382,
|
|
"description" => "A high-end dining experience with breathtaking views."
|
|
],
|
|
[
|
|
"name" => "Butchers",
|
|
"latitude" => 38.7685,
|
|
"longitude" => -9.0975,
|
|
"description" => "A prime destination for meat lovers."
|
|
],
|
|
[
|
|
"name" => "Capricciosa",
|
|
"latitude" => 38.7675,
|
|
"longitude" => -9.0897,
|
|
"description" => "A pizzeria with a pleasant terrace by the river."
|
|
],
|
|
[
|
|
"name" => "The Old House",
|
|
"latitude" => 38.77140277,
|
|
"longitude" => -9.09240424,
|
|
"description" => "A well-regarded Chinese restaurant."
|
|
],
|
|
[
|
|
"name" => "Honorato",
|
|
"latitude" => 38.7692,
|
|
"longitude" => -9.0958,
|
|
"description" => "A famous burger joint with a pleasant terrace."
|
|
]
|
|
];
|
|
?>
|
|
<!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>
|