title: Google Maps embed not showing
body: <p>I'm trying to set up a dynamic map with Vue.js</p>
  
  <p>I'm porting <a href="https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap" rel="nofollow noreferrer">this code</a> to vue. </p>
  
  <p>I've pretty much simply copied to function to a method like this:</p>
  
  <pre><code>        generateHeatmap(){
          const map = new google.maps.Map(document.getElementById('map'), {
              zoom: 13,
              center: {lat: 37.775, lng: -122.434},
              mapTypeId: 'satellite'
            });
  
            const heatmap = new google.maps.visualization.HeatmapLayer({
              data: this.getPoints(),
              map: map
            });
        },
  </code></pre>
  
  <p>The problem is that when I generate the heatmap the map doesn't show up. I can see that the html code changes in the console, but the html doesn't render anything. What am I missing?</p>
  
  <p>This is a live Jsfiddle:
  <a href="https://jsfiddle.net/eywraw8t/430049/" rel="nofollow noreferrer">https://jsfiddle.net/eywraw8t/430049/</a></p>