添加API显示灰色框后，Google Map无法正常工作

Question

Google map is showing grey box or sometimes show nothing/white i googled some links and try their ways but didn't work for me. 谷歌地图显示灰色框，有时不显示任何东西/白色，我在Google上搜索了一些链接并尝试使用它们的方式，但对我不起作用。 Any solution? 有什么办法吗？ i tried to change the zoom but still not working Console shows no error 我试图更改缩放比例，但仍无法正常工作控制台未显示任何错误

<head>    
<script src="http://maps.google.com/maps?file=api&amp;v=3&amp;hl=en&amp;key=GOOGLE_GENERATED_API&amp;sensor=true"type="text/javascript"></script>
    <script>
    function myMap() {
      var myCenter = new google.maps.LatLng(31.4856,74.3406);
      var mapCanvas = document.getElementById("map");
      var mapOptions = {center: myCenter, zoom: 8};
      var map = new google.maps.Map(mapCanvas, mapOptions);
      var marker = new google.maps.Marker({position:myCenter});
      marker.setMap(map);

      var infowindow = new google.maps.InfoWindow({
        content: "Welcome to Ali Institute of Education"
      });
      infowindow.open(map,marker);
    }
    </script>



    </head>

    <body onload="myMap()">

    <?php include '/layout/header.php';?>

     <!-- Contact Us Content -->
     <div class="container-fluid">



      <div id="map" style="width: 800px; height: 400px; overflow:visible;">&nbsp;</div>
    </div>
</body>

Answer 1

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&hl=en&key=GOOGLE_GENERATED_API&sensor=true" ></script>

                       <!--OR-->

<script src="https://maps.google.com/maps/api/js?file=api&amp;v=3&amp;hl=en&amp;key=GOOGLE_GENERATED_API&amp;sensor=true"></script>

On this link replace text GOOGLE_GENERATED_API with your google api key . 在此链接上，将GOOGLE_GENERATED_API文本替换为您的Google api键 。

Showing perfect on my side. 在我身边展现完美。 Which error you get on your browser consollog ? 您在浏览器控制台上遇到哪个错误？ your maps API cdn is not correct. 您的地图API CDN不正确。 Maybe you get this error google is not define. 也许您会收到此错误，但Google未定义。 google.maps.event.addDomListener (myMap); google.maps.event.addDomListener（myMap）; ADD this line or you can remove the onload from body and add this google.maps.event.addDomListener (window, 'load', myMap); 添加此行，或者您可以从正文中删除onload并添加此google.maps.event.addDomListener（窗口，“ load”，myMap）；

Additionaly I have added a click function on marker. 另外，我在标记上添加了单击功能。 If you have any question ask me in comment. 如果您有任何问题，请在评论中问我。

 function myMap() { var myCenter = new google.maps.LatLng(31.4856,74.3406); var mapCanvas = document.getElementById("map"); var mapOptions = {center: myCenter, zoom: 8}; var map = new google.maps.Map(mapCanvas, mapOptions); var marker = new google.maps.Marker({position:myCenter}); marker.setMap(map); var infowindow = new google.maps.InfoWindow({ content: "Welcome to Ali Institute of Education" }); marker.addListener('click', function () { infowindow.open(map, marker); }); google.maps.event.addDomListener (myMap); //google.maps.event.addDomListener (window, 'load', myMap); // if you use the window load myMap You don't need onload function on body tag }

 #map{ width: 800px; height: 400px; overflow:visible; }

 <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp"></script> </head> <body onload="myMap()"> <div class="container-fluid"> <div id="map"></div> </div> </head>

添加API显示灰色框后，Google Map无法正常工作

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-01-09 10:59:48

添加API显示灰色框后，Google Map无法正常工作

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-01-09 10:59:48

解决方案1
1 已采纳 2017-01-09 10:59:48