31:[] 2f:{"title":"Introduction à l'API Google Maps JS","cells":[{"id":0,"value":"# Introduction à l'API Google Maps JS","pinned":false,"hidden":false,"mode":"md"},{"id":2,"value":"// On charge l'API Google avec la clé associée au notepad (et limitée)\ngoogle = require('https://maps.googleapis.com/maps/api/js?key=AIzaSyDE3ikW83seRSD96Kf40XWPoQ2Ku4cTWwM')\n .catch(() => window.google)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"// Création de la carte Google Maps JS dans un

dimensionné et créé à l'avance\n{\n let lediv = html`

`;\n yield lediv; //Mot-clé Observable qui déclenche la création du

\n let map = new google.maps.Map(lediv, {\n center: Sigma_UT2J,\n zoom: 19,\n mapTypeId: \"satellite\",\n scaleControl: true\n });\n mapHolder[0]=map;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"google.maps.MapTypeId.SATELLITE","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"// Variable pour stocker la carte en portée globale sur la page\nmapHolder = [0];","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"// Variable stockant un lieu défini par ses coordonnées\ncapitole = new google.maps.LatLng(43.60438,1.44336);","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"Sigma_UT2J = new google.maps.LatLng(43.5782,1.4012);","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"// Fenêtre popup d'information au clic\ninfowindow1 = new google.maps.InfoWindow({\n\t\t\tcontent: \"

Coucou les Sigma 2025 !

\"\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"// Ajout d'un marqueur (puce cliquable), sur la place du Capitole\nmarker1 = new google.maps.Marker( {\n position: capitole,\n map: mapHolder[0],\n animation: google.maps.Animation.DROP,\n\ttitle: \"Capitole\"\n} )","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"// Ajout d'une écoute d'évènement clic sur le marqueur\nmarker1.addListener('click', function() {\n \t\t\t\tinfowindow1.open(mapHolder[0], marker1);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"infowindow2 = new google.maps.InfoWindow({\n\t\t\tcontent: \"

UT2J-Sigma

\"\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"marker2 = new google.maps.Marker({\n\t\t\t\tposition: Sigma_UT2J,\n\t\t\t\tmap: mapHolder[0],\n\t\t\t\tanimation: google.maps.Animation.DROP,\n\t\t\t\ttitle: \"Sigma\",\n\t\t\t\ticon: {\n\t\t\t\t\tpath: google.maps.SymbolPath.CIRCLE,\n\t\t\t\t\tfillColor: 'orange',\n\t\t\t\t\tfillOpacity: .6,\n\t\t\t\t\tscale: 40,\n\t\t\t\t\tstrokeColor: 'yellow',\n\t\t\t\t\tstrokeWeight: .8\n\t\t\t\t}\n\t\t\t})","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"marker2.addListener('click', function() {\n \t\t\t\tinfowindow2.open(mapHolder[0], marker2);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"transit = {\n // Ajout de la couche des transports en commun\n const transitLayer = new google.maps.TransitLayer();\n transitLayer.setMap(mapHolder[0]);\n return \"Ok\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"md`## Exercices :\n- Modifier le centrage et le niveau de zoom de la carte.\n- Changer le fond de carte pour celui des images satellite (typeid:'satellite', dans l'objet map).\n- Ajouter un autre marqueur cliquable, centré sur l'ENSAT.\n- Ajouter le [contrôle de rotation](https://developers.google.com/maps/documentation/javascript/controls) sur l'interface.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"// Inspiré par : https://observablehq.com/@quintincutts/using-a-google-map","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}