Google карта не показывает

Question

function initMap() { 
      var map = new google.maps.Map(document.getElementById('map'), { 
       zoom: 10, 
       center: {lat: -33.9, lng: 151.2} 
      }); 
      google.maps.event.addListener(map, 'tilesloaded', function() { 
      document.getElementById('map-id').style.position = 'absolute'/'fixed'/'potato'/'whatever'; 
     }); 
      setMarkers(map); 
     } 
     var beaches = [ 
      ['Bondi Beach', -33.890542, 151.274856, 4], 
      ['Coogee Beach', -33.923036, 151.259052, 5], 
      ['Cronulla Beach', -34.028249, 151.157507, 3], 
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], 
      ['Maroubra Beach', -33.950198, 151.259302, 1] 
     ]; 

     function setMarkers(map) { 
      var image = { 
       url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png', 
       size: new google.maps.Size(20, 32), 
       origin: new google.maps.Point(0, 0), 
       anchor: new google.maps.Point(0, 32) 
      }; 
      var shape = { 
       coords: [1, 1, 1, 20, 18, 20, 18, 1], 
       type: 'poly' 
      }; 
      for (var i = 0; i < beaches.length; i++) { 
       var beach = beaches[i]; 
       var marker = new google.maps.Marker({ 
        position: {lat: beach[1], lng: beach[2]}, 
        map: map, 
        icon: image, 
        shape: shape, 
        title: beach[0], 
        zIndex: beach[3] 
       }); 
      } 
     } 

м пытается показать карту Google, но когда я инспектировать элемент в браузере, то он покажет мне положение: относительный; переполнение: скрыто;

Спасибо!

Answer 1

Одна вещь, которую я заметил, что у вас есть следующее:

var map = new google.maps.Map(document.getElementById('map') 

и

document.getElementById('map-id').style.position = 'absolute'/'fixed'/'potato'/'whatever'; 

Поправьте меня, если я ошибаюсь, но я думаю, что вы ссылаетесь на DIV, который содержит карту в обоих этих утверждениях. Я сделал JSFiddle где ДИВ держит карту имеет идентификатор «карты-ид», и я изменил первую строку кода в моем ответе на следующее:

var map = new google.maps.Map(document.getElementById('map-id') 

Я также взял вторую строку кода Я опубликовал в своем ответе, потому что это не показалось актуальным.

Я убедился, что был CSS, чтобы установить высоту на 100% для этого div, и похоже, что все работает. Пожалуйста, смотрите мою скрипку здесь:

https://jsfiddle.net/790ryvnf/

Пожалуйста, обратите внимание, что вам нужно будет поставить свой собственный ключ API в этом коде для того, чтобы работать, я взял мину за безопасность.

Надеюсь, это поможет!