0

I'm trying to set up a dynamic map with Vue.js

I'm porting this code to vue.

I've pretty much simply copied to function to a method like this:

        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
          });
      },

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?

This is a live Jsfiddle: https://jsfiddle.net/eywraw8t/430049/

Costantin
  • 2,486
  • 6
  • 31
  • 48

1 Answers1

2

In your CSS, you only specify that the #map is width: 100%, but you need to actually specify a width and height. Something like this would work:

#map {
  height: 500px;
  width: 500px;
}

Edit:

Based on the comments you could use 100% width and height, see this question for more info.

Joseph
  • 5,070
  • 1
  • 25
  • 26
  • I think here you can see how use `width:100%` and `height:100%` https://stackoverflow.com/questions/10209704/set-google-maps-container-div-width-and-height-100 – ntzz Oct 23 '18 at 14:33