Guide de Lille

Guide de Lille

body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: ‚Roboto‘, sans-serif;
}
#map {
height: 100%;
width: 100%;
}
#sidebarToggle {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
cursor: pointer;
padding: 10px;
background-color: #4285F4;
color: white;
border-radius: 5px;
}
#centerMapButton {
position: absolute;
top: 70px;
left: 10px;
z-index: 2;
cursor: pointer;
padding: 10px;
background-color: #4285F4;
color: white;
border-radius: 5px;
}
#sidebar {
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: rgba(255, 255, 255, 0.9);
width: 250px;
transform: translateX(-250px);
transition: transform 0.3s ease-in-out;
overflow-y: auto;
height: 100%;
}
#sidebar.open {
transform: translateX(0);
}
.location-item {
padding: 10px;
cursor: pointer;
border-bottom: 1px solid #ddd;
}
.location-item:hover {
background-color: #e0e0e0;
}
.info-window img {
max-width: 100%;
height: auto;
}
.info-window audio {
width: 100%;
margin-top: 10px;
}

https://tiiny.host/ad-script.jshttps://analytics.tiiny.site/js/plausible.js

let map;
let currentLocationMarker;
let currentInfoWindow = null;
let sidebarOpen = false;

const locations = [
{
lat: 50.941278,
lng: 6.958281,
title: „Cologne Cathedral“,
description: „A renowned monument of German Catholicism and Gothic architecture.“,
imageUrl: „icons/dom.jpg“,
audioUrl: „audio/1.mp3“,
type: „Historical“
},
{
lat: 50.937531,
lng: 6.960279,
title: „St. Gereon’s Basilica“,
description: „One of the twelve Romanesque churches of Cologne, built upon ancient foundations.“,
imageUrl: „icons/stgeorg.jpg“,
audioUrl: „audio/2.mp3“,
type: „Action“
}
// Add more locations as needed
];

function initMap() {
map = new google.maps.Map(document.getElementById(‚map‘), {
zoom: 12,
center: {lat: 50.937531, lng: 6.960279},
streetViewControl: false,
mapTypeControl: false,
fullscreenControl: false,
styles: [
{elementType: ‚geometry‘, stylers: [{color: ‚#f5f5f5‘}]},
{elementType: ‚labels.icon‘, stylers: [{visibility: ‚off‘}]},
{elementType: ‚labels.text.fill‘, stylers: [{color: ‚#616161‘}]},
{elementType: ‚labels.text.stroke‘, stylers: [{color: ‚#f5f5f5‘}]},
{featureType: ‚administrative.land_parcel‘, elementType: ‚labels.text.fill‘, stylers: [{visibility: ‚off‘}]},
{featureType: ‚poi‘, elementType: ‚geometry‘, stylers: [{visibility: ‚off‘}]},
{featureType: ‚road‘, elementType: ‚geometry‘, stylers: [{color: ‚#ffffff‘}]},
{featureType: ‚road.arterial‘, elementType: ‚labels.text.fill‘, stylers: [{visibility: ‚off‘}]},
{featureType: ‚road.highway‘, elementType: ‚geometry‘, stylers: [{color: ‚#dadada‘}]},
{featureType: ‚road.highway‘, elementType: ‚labels.text.fill‘, stylers: [{visibility: ‚off‘}]},
{featureType: ‚road.local‘, stylers: [{visibility: ‚off‘}]},
{featureType: ‚water‘, elementType: ‚geometry‘, stylers: [{color: ‚#c9c9c9‘}]},
{featureType: ‚water‘, elementType: ‚labels.text.fill‘, stylers: [{visibility: ‚off‘}]}
]
});

locations.forEach((location, index) => {
const marker = new google.maps.Marker({
position: location,
map: map,
title: location.title,
icon: getMarkerIcon(location.type)
});

const infoWindow = new google.maps.InfoWindow({
content: getContent(location)
});

marker.addListener(‚click‘, function() {
if (currentInfoWindow) currentInfoWindow.close();
infoWindow.open(map, marker);
currentInfoWindow = infoWindow;
closeSidebar();
});

const item = document.createElement(‚div‘);
item.classList.add(‚location-item‘);
item.textContent = location.title;
item.onclick = function() {
map.setCenter(marker.getPosition());
google.maps.event.trigger(marker, ‚click‘);
};
document.getElementById(’sidebar‘).appendChild(item);
});

document.getElementById(’sidebarToggle‘).addEventListener(‚click‘, function() {
if (sidebarOpen) {
closeSidebar();
if (currentInfoWindow) currentInfoWindow.close();
} else {
openSidebar();
if (currentInfoWindow) currentInfoWindow.close();
}
});

document.getElementById(‚centerMapButton‘).addEventListener(‚click‘, function() {
moveToCurrentLocation();
});
}

function getContent(location) {
return `

`;
}

function moveToCurrentLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
const pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
if (!currentLocationMarker) {
currentLocationMarker = new google.maps.Marker({
position: pos,
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7,
fillColor: „#4285F4“,
fillOpacity: 1,
strokeWeight: 2
},
title: „Your Location“
});
} else {
currentLocationMarker.setPosition(pos);
}
map.setCenter(pos);
}, function() {
console.error(„Error: The Geolocation service failed.“);
});
} else {
console.error(„Error: Your browser doesn’t support geolocation.“);
}
}

function openSidebar() {
document.getElementById(’sidebar‘).classList.add(‚open‘);
sidebarOpen = true;
if (currentInfoWindow) currentInfoWindow.close();
}

function closeSidebar() {
document.getElementById(’sidebar‘).classList.remove(‚open‘);
sidebarOpen = false;
}

function getMarkerIcon(type) {
let icon;
switch (type) {
case „Action“:
icon = „icons/bolt.png“;
break;
case „Anecdotal“:
icon = „icons/speech.png“;
break;
case „Historical“:
icon = „icons/book.png“;
break;
default:
icon = „“;
}
return {
url: icon,
scaledSize: new google.maps.Size(40, 40)
};
}

https://maps.googleapis.com/maps/api/js?key=AIzaSyBHSRKkEJee6xZoSa4SwewGtNgFQXCneWs&callback=initMap