CODEWITHSUNDEEP
javascriptgoogle-maps-api-3vuejs2
Costantin
Costantin

Reputation: 2656

Google Maps embed not showing

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/

Upvotes: 0

Views: 158

Answers (1)

Joseph
Joseph

Reputation: 5160

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.

Upvotes: 2

Related Questions