Google Maps

by jwerre

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<!-- <script async="" defer="" data-main="/javascript/main" src="https://cdn.jsdelivr.net/npm/[email protected]/require.min.js"></script> -->

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
    background: gray;
    padding: 40px;
}

.insight-module {
  background: white;
  padding: 40px;
}

.insight-module-data {
  height: 500px;   
}
.insight-module-canvas-container {
  height: 100%;
}

JavaScript

(function() {

  const template = `
<div class="insight-module">
<header class="insight-module-header">
<h3><%= title %></h3>
<h4><%- subtitle %>
</h4>
</header>
<div class="insight-module-data">
<div id="map" class="insight-module-canvas-container">
<p class="insight-module-no-data-message">There is no data for this Insight.</p>
<canvas></canvas>
</div>
<div class="loader"><div class="circle-loader big">
</div>
</div>
</div>
</div>`;


  function render() {
    $body = $('body').append(_.template(template)({
      title: 'Map',
      subtitle: 'google maps example'
    }));
    
	$mapContainer = $body.find('#map')
    fetchData()
      .then((data) => {
        renderMap(data, $mapContainer[0])
      });
  }



  function fetchData() {

    return new Promise((resolve, reject) => {

      const data = Array.from(Array(250), () => {
        return {
          lat: _.random(25, 50),
          lng: _.random(-125, -70)
        };
      });
      setTimeout(() => {
        resolve(data);
      }, 100)

    });
  }

  function renderMap(data, el) {

    map = new google.maps.Map(el, {
      center: {
        lat: 23,
        lng: 0
      },
      zoom: 2,
      streetViewControl: false,
      mapTypeControl: false,
      /* mapId: Locations.MAP_STYLE_ID */
    });
    
  }



  render();



})()