Question

Google地图显示灰色框或有时显示无/白色我搜索了一些链接并尝试了他们的方式，但对我来说并不起作用。有解决方案吗我试图改变缩放但仍无法正常工作控制台显示无错误

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

在此链接上，将 GOOGLE_GENERATED_API 替换为 google api密钥。

在我身边表现出完美。您在浏览器consollog上遇到了哪个错误？你的地图API cdn不正确。也许你收到此错误谷歌未定义。 google.maps.event.addDomListener（myMap）;添加此行，或者您可以从正文中删除onload并添加它 google.maps.event.addDomListener（window，'load'，myMap）;

另外我在标记上添加了一个点击功能。如果您有任何疑问，请在评论中提问我。

 
     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 个答案: