Spaces:
Running
Running
| <html> | |
| <head> | |
| <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> | |
| <!-- Camera and Controls --> | |
| <a-entity camera look-controls></a-entity> | |
| <!-- Google Maps Entity --> | |
| <a-entity id="map" position="0 1.6 -1"></a-entity> | |
| </a-scene> | |
| <script> | |
| // Get the map element | |
| var mapEl = document.querySelector('#map'); | |
| // Set the size of the map element | |
| mapEl.setAttribute('geometry', { | |
| primitive: 'plane', | |
| height: 2, | |
| width: 3 | |
| }); | |
| // Create a new Google Maps object | |
| var map = new google.maps.Map(mapEl, { | |
| center: {lat: 40.714, lng: -74.005}, | |
| zoom: 12 | |
| }); | |
| // Set the position of the map element based on the position of the Google Maps object | |
| mapEl.setAttribute('position', { | |
| x: map.getCenter().lng(), | |
| y: 1.6, | |
| z: -map.getCenter().lat() | |
| }); | |
| // Listen for the Google Maps object to load and then set the position of the map element again | |
| google.maps.event.addListenerOnce(map, 'tilesloaded', function() { | |
| mapEl.setAttribute('position', { | |
| x: map.getCenter().lng(), | |
| y: 1.6, | |
| z: -map.getCenter().lat() | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |