Google Maps встраивание не отображается

Question

Я пытаюсь настроить динамическую карту с помощью Vue.js

Я портирую этот код на Vue.

Я просто скопировал, чтобы функционировать в метод, подобный следующему:

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

Проблема в том, что когда я генерирую тепловую карту, карта не отображается.Я вижу, что html-код изменяется в консоли, но html ничего не отображает.Чего мне не хватает?

Это живой Jsfiddle: https://jsfiddle.net/eywraw8t/430049/

Answer 1

В вашем CSS вы указываете только, что #map - width: 100%, но вам нужно указать ширину и высоту.Примерно так будет работать:

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

Редактировать:

На основании комментариев вы можете использовать ширину и высоту 100%, см. этот вопрос для получения дополнительной информации .