// Création de la carte Google Maps JS dans un <div> dimensionné et créé à l'avance
{
let lediv = html`<div style='height:800px;'></div>`;
yield lediv; //Mot-clé Observable qui déclenche la création du <div>
let map = new google.maps.Map(lediv, {
center: capitole,
zoom: 19,
mapTypeId: "satellite",
scaleControl: true
});
mapHolder[0]=map;
}
google.maps.MapTypeId.SATELLITE
// Variable pour stocker la carte en portée globale sur la page
mapHolder = [0];
// Variable stockant un lieu défini par ses coordonnées
capitole = new google.maps.LatLng(43.60438,1.44336);
Sigma_UT2J = new google.maps.LatLng(43.5782,1.4012);
// Fenêtre popup d'information au clic
infowindow1 = new google.maps.InfoWindow({
content: "<p><b>Coucou les Sigma 2025 !</b></p>"
});
// Ajout d'un marqueur (puce cliquable), sur la place du Capitole
marker1 = new google.maps.Marker( {
position: capitole,
map: mapHolder[0],
animation: google.maps.Animation.DROP,
title: "Capitole"
} )
// Ajout d'une écoute d'évènement clic sur le marqueur
marker1.addListener('click', function() {
infowindow1.open(mapHolder[0], marker1);
})
infowindow2 = new google.maps.InfoWindow({
content: "<p><b><a href='https://sigma.univ-toulouse.fr'>UT2J-Sigma</a></b></p>"
});
marker2 = new google.maps.Marker({
position: Sigma_UT2J,
map: mapHolder[0],
animation: google.maps.Animation.DROP,
title: "Sigma",
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: 'orange',
fillOpacity: .6,
scale: 40,
strokeColor: 'yellow',
strokeWeight: .8
}
})
marker2.addListener('click', function() {
infowindow2.open(mapHolder[0], marker2);
})
transit = {
// Ajout de la couche des transports en commun
const transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(mapHolder[0]);
return "Ok";
}
// Inspiré par : https://observablehq.com/@quintincutts/using-a-google-map
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
