Spaces:
Running
Running
File size: 1,444 Bytes
8523408 182d597 5edaabb f526999 5edaabb f526999 5edaabb 3342ef4 5edaabb 182d597 5edaabb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!DOCTYPE html>
<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>
|