它不起作用Google Map Api

Question

我在這個腳本上連接谷歌地圖。 之後，卡片工作2分鐘，併產生空白。代碼表示卡已連接。但沒有繪圖卡。 請告訴我可能是什麼原因？

<div id="map"></div> 

<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script> 





var map; 
    function initMap() { 

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

      center: {lat: 55.760186, lng: 37.618711}, 

      zoom: 18, 


      styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]}] 
     }); 


     var marker = new google.maps.Marker({ 


      position: {lat: 55.760186, lng: 37.618711}, 


      map: map, 


      title: 'Наш маркер: Большой театр', 


      icon: 'http://rightblog.ru/wp-content/uploads/2016/07/theatre_icon.png' 
     }); 


     var contentString = '<div id="content">'+ 
       '<div id="siteNotice">'+ 
       '</div>'+ 
       '<h1 id="firstHeading" class="firstHeading">Большой театр</h1>'+ 
       '<div id="bodyContent">'+ 
       '<p>Госуда́рственный академи́ческий Большо́й теа́тр Росси́и, или просто Большой театр — один из крупнейших' + 
       'в России и один из самых значительных в мире театров оперы и балета.</p>'+ 
       '<p><b>Веб-сайт:</b> <a href="http://www.bolshoi.ru/" target="_blank">bolshoi.ru</a>'+ 
       '</p>'+ 
       '</div>'+ 
       '</div>'; 


     var infowindow = new google.maps.InfoWindow({ 
      content: contentString, 
      maxWidth: 400 
     }); 


     marker.addListener('click', function() { 
      infowindow.open(map, marker); 
     }); 

    } 

Answer 1

您可以使用此fiddle

HTML：

<div id="map" style="height:200px"></div> 

JS：

function loadScript(src,callback){ 

    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    if(callback)script.onload=callback; 
    document.getElementsByTagName("head")[0].appendChild(script); 
    script.src = src; 
    } 


    loadScript('http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialize'); 


function initialize() { 

    var mapOptions = { 
      zoom: 18, 
      center: new google.maps.LatLng(55.760186, 37.618711), 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      styles: [{ "featureType": "administrative", "elementType": "labels.text.fill", "stylers": [{ "color": "#444444" }] }, { "featureType": "landscape", "elementType": "all", "stylers": [{ "color": "#f2f2f2" }] }, { "featureType": "poi", "elementType": "all", "stylers": [{ "visibility": "off" }] }, { "featureType": "road", "elementType": "all", "stylers": [{ "saturation": -100 }, { "lightness": 45 }] }, { "featureType": "road.highway", "elementType": "all", "stylers": [{ "visibility": "simplified" }] }, { "featureType": "road.arterial", "elementType": "labels.icon", "stylers": [{ "visibility": "off" }] }, { "featureType": "transit", "elementType": "all", "stylers": [{ "visibility": "off" }] }, { "featureType": "water", "elementType": "all", "stylers": [{ "color": "#46bcec" }, { "visibility": "on" }] }] 
    }; 

    map = new google.maps.Map(document.getElementById('map'), 
      mapOptions); 
      var marker = new google.maps.Marker({ 
       position: { lat: 55.760186, lng: 37.618711 }, 
       map: map, 
       title: 'Наш маркер: Большой театр', 
       icon: 'http://rightblog.ru/wp-content/uploads/2016/07/theatre_icon.png' 

      }); 
      var contentString = '<div id="content">' + 
        '<div id="siteNotice">' + 
        '</div>' + 
        '<h1 id="firstHeading" class="firstHeading">Большой театр</h1>' + 
        '<div id="bodyContent">' + 
        '<p>Госуда́рственный академи́ческий Большо́й теа́тр Росси́и, или просто Большой театр — один из крупнейших' + 
        'в России и один из самых значительных в мире театров оперы и балета.</p>' + 
        '<p><b>Веб-сайт:</b> <a href="http://www.bolshoi.ru/" target="_blank">bolshoi.ru</a>' + 
        '</p>' + 
        '</div>' + 
        '</div>'; 

      var infowindow = new google.maps.InfoWindow({ 
       content: contentString, 
       maxWidth: 400 
      }); 

      marker.addListener('click', function() { 
       infowindow.open(map, marker); 
      }); 
    } 

Answer 2

更改線路是這樣的：

<div id="map" style="min-height:400px"></div> 

另外，還要確保您使用的API密鑰是這樣的：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" 
    async defer></script> 

這是一個工作代碼：

 var map; 
 
    function initMap() { 
 

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

 
      center: {lat: 55.760186, lng: 37.618711}, 
 

 
      zoom: 18, 
 

 

 
      styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]}] 
 
     }); 
 

 

 
     var marker = new google.maps.Marker({ 
 

 

 
      position: {lat: 55.760186, lng: 37.618711}, 
 

 

 
      map: map, 
 

 

 
      title: 'Наш маркер: Большой театр', 
 

 

 
      icon: 'http://rightblog.ru/wp-content/uploads/2016/07/theatre_icon.png' 
 
     }); 
 

 

 
     var contentString = '<div id="content">'+ 
 
       '<div id="siteNotice">'+ 
 
       '</div>'+ 
 
       '<h1 id="firstHeading" class="firstHeading">Большой театр</h1>'+ 
 
       '<div id="bodyContent">'+ 
 
       '<p>Госуда́рственный академи́ческий Большо́й теа́тр Росси́и, или просто Большой театр — один из крупнейших' + 
 
       'в России и один из самых значительных в мире театров оперы и балета.</p>'+ 
 
       '<p><b>Веб-сайт:</b> <a href="http://www.bolshoi.ru/" target="_blank">bolshoi.ru</a>'+ 
 
       '</p>'+ 
 
       '</div>'+ 
 
       '</div>'; 
 

 

 
     var infowindow = new google.maps.InfoWindow({ 
 
      content: contentString, 
 
      maxWidth: 400 
 
     }); 
 

 

 
     marker.addListener('click', function() { 
 
      infowindow.open(map, marker); 
 
     }); 
 

 
    }

<div id="map" style="min-height:400px"></div> 
 
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>