Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>A-Frame Google Maps Example</title> | |
| <meta name="description" content="A-Frame Google Maps Example"> | |
| <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> | |
| <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDybq2mxujekZVivmr03Y5-GGHXesn4TLI"></script> | |
| </head> | |
| <body> | |
| <a-scene> | |
| <a-entity id="camera" position="0 1.6 0"> | |
| <a-entity id="rig" position="0 0 0"> | |
| <a-entity camera look-controls wasd-controls></a-entity> | |
| </a-entity> | |
| </a-entity> | |
| <a-sky color="#e5e5e5"></a-sky> | |
| <a-entity id="markers"></a-entity> | |
| </a-scene> | |
| <script> | |
| // Define hospital locations with latitude and longitude | |
| const hospitals = [ | |
| { | |
| name: "Mayo Clinic", | |
| lat: 44.021631, | |
| lng: -92.46298, | |
| }, | |
| { | |
| name: "Cleveland Clinic", | |
| lat: 41.504752, | |
| lng: -81.609618, | |
| }, | |
| { | |
| name: "Johns Hopkins Hospital", | |
| lat: 39.296677, | |
| lng: -76.592477, | |
| }, | |
| { | |
| name: "Massachusetts General Hospital", | |
| lat: 42.362575, | |
| lng: -71.069588, | |
| }, | |
| { | |
| name: "UCSF Medical Center", | |
| lat: 37.765188, | |
| lng: -122.457809, | |
| }, | |
| { | |
| name: "New York-Presbyterian Hospital", | |
| lat: 40.840726, | |
| lng: -73.950286, | |
| }, | |
| { | |
| name: "Brigham and Women's Hospital", | |
| lat: 42.336039, | |
| lng: -71.105804, | |
| }, | |
| { | |
| name: "Stanford Health Care-Stanford Hospital", | |
| lat: 37.434647, | |
| lng: -122.176858, | |
| }, | |
| { | |
| name: "Hospitals of the University of Pennsylvania-Penn Presbyterian", | |
| lat: 39.951084, | |
| lng: -75.195819, | |
| }, | |
| { | |
| name: "Northwestern Memorial Hospital", | |
| lat: 41.896472, | |
| lng: -87.621113, | |
| }, | |
| ]; | |
| // Initialize Google Maps | |
| const map = new google.maps.Map(document.createElement("div"), { | |
| center: new google.maps.LatLng(37.7749, -122.4194), | |
| zoom: 5, | |
| disableDefaultUI: true, | |
| }); | |
| // Create A-Frame markers for each hospital | |
| hospitals.forEach(hospital => { | |
| const marker = document.createElement("a-entity"); | |
| marker.setAttribute("gps-entity-place", `latitude: ${hospital.lat}; longitude: ${hospital.lng};`); | |
| marker.setAttribute("gltf-model", "https://cdn.aframe.io/examples/ar/models/earth/continents.gltf"); | |
| marker.setAttribute("scale", "5 5 5"); | |
| marker.setAttribute("look-at", "#camera"); | |
| marker.setAttribute("animation", "property: rotation; to: 0 360 0; loop: true; dur: 10000; easing: linear"); | |
| document.querySelector("#markers").appendChild(marker); | |
| }); | |
| // Add the Google Maps canvas to the A-Frame scene | |
| const canvas = map.getDiv(); | |
| canvas.style.position = "absolute"; | |
| canvas.style.top = "0"; | |
| canvas.style.left = "0"; | |
| canvas.style.width = "100%"; | |
| canvas.style.height = "100%"; | |
| document.querySelector("a-scene").appendChild(canvas); | |
| // Use GPS Entity component to sync A-Frame camera with Google Maps view | |
| document.querySelector("#camera").setAttribute("gps-entity-place", `latitude: 37.7749; longitude: -122.4194;`); | |
| </script> | |
| </body> | |
| </html> |