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

改变这样的一行：

<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>

Answer 2

您可以使用此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);
            });
  }

它不适用于Google Map Api

2 个答案: