2e:null 2f:["$","title",null,{"children":"Introduction à l'API Google Maps JS | Sigma | Observable"}] 34:[] 32:{"id":"c406e47a1bbedabe","slug":"introduction-a-lapi-google-maps-v2","title":"Introduction à l'API Google Maps JS","thumbnail":"8d8c76a007fbb8589ce7f57a7e82c5043681f46aa9d84df758c761f6b29888e7","access_level":"public","create_time":"$D2020-12-11T08:34:08.142Z","update_time":"$D2025-12-05T08:29:22.120Z","view_time":null,"first_public_time":"$D2020-12-11T10:42:57.375Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"85bc7cce97523336","login":"sigma-toulouse","name":"Sigma","avatar_url":"https://avatars-next.observableusercontent.com/e9322803ac5739951b87803227b90baceb0802254d302b995376a94204c226e7","tier":"pro_2024"},"version":223,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc56e6af58493346","login":"ljegou","name":"Laurent Jégou","avatar_url":"https://avatars-next.observableusercontent.com/447aa44a872789c3c13d2505fdb5a34daaaa3a44590422f4f782b6ea9a4bd3ac","tier":null}],"members":[{"type":"individual","id":"dc56e6af58493346","login":"ljegou","name":"Laurent Jégou","avatar_url":"https://avatars-next.observableusercontent.com/447aa44a872789c3c13d2505fdb5a34daaaa3a44590422f4f782b6ea9a4bd3ac","tier":null,"role":"editor"},{"type":"team","id":"85bc7cce97523336","login":"sigma-toulouse","name":"Sigma","avatar_url":"https://avatars-next.observableusercontent.com/e9322803ac5739951b87803227b90baceb0802254d302b995376a94204c226e7","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":30,"collection":{"id":"4343dbcc9aaf7764","slug":"webmapping","title":"WebMapping","owner":{"id":"85bc7cce97523336","login":"sigma-toulouse","name":"Sigma"}},"type":"notebook","body":{"title":"Introduction à l'API Google Maps JS","cells":[{"id":0,"value":"# Introduction à l'API Google Maps JS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"google.maps.MapTypeId.SATELLITE","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"// Variable pour stocker la carte en portée globale sur la page\nmapHolder = [0];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"Sigma_UT2J = new google.maps.LatLng(43.5782,1.4012);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"infowindow2 = new google.maps.InfoWindow({\n\t\t\tcontent: \"

UT2J-Sigma

\"\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"marker2.addListener('click', function() {\n \t\t\t\tinfowindow2.open(mapHolder[0], marker2);\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"// Inspiré par : https://observablehq.com/@quintincutts/using-a-google-map","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"