[Two.js 336] Two.js & Google Maps

by jonobr1

HTML

<script src="https://cdn.jsdelivr.net/gh/jonobr1/two.js@dev/build/two.js"></script>
<div id="map"></div>
<div id="stage"></div>
<script>

	var map;

  var two = new Two({
    fullscreen: true
  }).appendTo(document.getElementById('stage'));

  var text = two.makeText('', two.width / 2, two.height / 2, {
    family: 'times, serif',
    size: 64,
    fill: '#333',
    style: 'italic'
  });

  var setup = function() {

    map = new google.maps.Map(document.getElementById('map'), {
      center: { lat: 48.8566, lng: 2.3522 },
      zoom: 13
    });

    map.addListener('bounds_changed', updateStage);
    two.play();

  }

  function updateStage() {
    text.position.set(two.width / 2, two.height / 2);
    text.value = [
      map.center.lat().toFixed(3) + '°',
      map.center.lng().toFixed(3) + '°',
      map.zoom
    ].join(' ');
  }

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDS8mLg9IR5j3TKSNRf_cB4dg9KKtvMh0s&callback=setup" defer async></script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map,
#stage {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#stage {
  pointer-events: none;
}

/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}