Public
Edited
Dec 7, 2023
2 forks
Insert cell
# Google Maps API avec du géocodage
Insert cell
// On charge l'API Google avec la clé associée au notepad (et limitée)
google = require('https://maps.googleapis.com/maps/api/js?key=AIzaSyDE3ikW83seRSD96Kf40XWPoQ2Ku4cTWwM')
.catch(() => window.google)
Insert cell
// Variable pour stocker la carte en portée globale sur la page
mapHolder = [];
Insert cell
// Variable stockant un lieu défini par ses coordonnées
capitole = new google.maps.LatLng(43.60438,1.44336);
Insert cell
// Création de la carte Google Maps JS dans un <div> dimensionné et créé à l'avance
{
let lediv = html`<div style='height:400px;'></div>`;
yield lediv; //Mot-clé Observable qui déclanche la création du <div>
let map = new google.maps.Map(lediv, {
center: capitole,
zoom: 10,
//mapTypeId: 'roadmap',
//scaleControl: true
});
mapHolder[0]=map;
}
Insert cell
Insert cell
geocoder = new google.maps.Geocoder();
Insert cell
geocoder.geocode({
address: encodeURI(adresse)
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
mapHolder[0].setCenter(results[0].geometry.location);
mapHolder[0].setZoom(18);
let marker = new google.maps.Marker({
position: results[0].geometry.location,
clickable: false,
map: mapHolder[0]
});
} else {
alert('Le géocodage à échoué : ' + status);
}
});
Insert cell

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.
Learn more