Roman Nrokov Roman Nrokov - 28 days ago 8
Javascript Question

It does not work Google Map Api

I connect google map on this script.
After that the card worked 2 minutes and the resulting white space.
The code indicated that the card is connected. But there is no drawing card.
Please tell me the reason may be what?

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

}


enter image description here

Answer

Change the line like this:

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

Also make sure you use your API key like this:

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

This is a working code:

     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>