title: Google Maps api show grey screen
body: <p>I am trying to get on my website the gmaps with few markers but i am getting the grey screen or partially grey screen.Before, I used google maps API the same way and everythings works fine. If you can help me I would be grateful.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;Zadanie 7&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container-fluid" id="map" style="height: 500px;"&gt;
  
  &lt;/div&gt;
  &lt;div class="container-fluid"&gt;
      &lt;div class="row content"&gt;
          &lt;div class="col-sm-3 sidenav"&gt;
              &lt;h4&gt;Zadanie 6 Martin Kranec&lt;/h4&gt;
              &lt;ul class="nav nav-pills nav-stacked"&gt;
                  &lt;li&gt;&lt;a href="firstpage.php"&gt;Prvá Stránka&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="secondpage.php"&gt;Druhá Stránka&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="active"&gt;&lt;a href="thirdpage.php"&gt;Tretia Stránka&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;&lt;br&gt;
          &lt;/div&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class='container-fluid'&gt;&lt;div class='table-responsive'&gt;&lt;table class='table'&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Vlajka&lt;/th&gt;&lt;th&gt;Štát&lt;/th&gt;&lt;th&gt;Počet Navštevníkov&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;World&lt;/td&gt;&lt;td&gt;World&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;img class='flag' src='http://www.geonames.org/flags/x/sk.gif'&gt;&lt;/td&gt;&lt;td&gt;&lt;a href='countrystatistics.php?countrycode=sk'&gt;Slovensko&lt;/a&gt;&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;footer class="container-fluid"&gt;
      &lt;p&gt;&amp;COPY;Martin Kranec Webové technológie&lt;/p&gt;
  &lt;/footer&gt;
  &lt;script type='text/javascript'&gt; 
      var lat=[]; 
      var lon=[];
      lat.push(48.15);
      lon.push(17.1167);
      lat.push(48.1704);
      lon.push(17.4209);
  &lt;/script&gt;
  &lt;script&gt;
      function initMap() {
          //alert(lat[1]);
          var mapProp = {
              center: new google.maps.LatLng(89, -25),
              zoom: 4,
              mapTypeId:google.maps.MapTypeId.ROADMAP
          };
          var map = new google.maps.Map(document.getElementById("map"), mapProp);
          var count = lat.length;
          for (var i = 0; i &lt; count; i++) {
              var myLatLng = {lat: lat[i], lng: lon[i]};
              var marker = new google.maps.Marker({
                  position: myLatLng,
                  map: map,
                  title: ''
              });
          }
      }
      initMap();
      //initMap();
  &lt;/script&gt;
  &lt;!--&lt;script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY&amp;callback=initMap"&gt;&lt;/script&gt;--&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and here is my website where I work on this project <a href="http://147.175.98.165/zadanie7/thirdpage.php" rel="nofollow noreferrer">http://147.175.98.165/zadanie7/thirdpage.php</a></p>