Texas Transmission Lines - deck.gl + Google Maps

by borja_munoz

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Texas Transmission Lines - deck.gl + Google Maps</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://unpkg.com/deck.gl@8.7.0/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/carto@8.7.0/dist.min.js"></script>
    <style>

    </style>
  </head>

  <body>
    
    <div id="map"></div>

    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCyuxJgAf5h8Q_MPhhQNml9A7uJtwgiRlg&callback=initMap&libraries=&v=beta"
      async
    ></script>
    
  </body>

</html>

CSS

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 31, lng: -100 },
    zoom: 6,
    tilt: 45,
    heading: 0,
    mapId: '2fccc3b36c22a0e2',
    disableDefaultUI: true,
  });

  const cartoMapId = 'b502bf53-877d-4e89-b5ad-71982cac431d';
  deck.carto.fetchMap({cartoMapId}).then(({layers}) => {
    const overlay = new deck.GoogleMapsOverlay({layers});
    overlay.setMap(map);
  });
}