Question

我的HTML code：

<html>
<head>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=mykeyM&callback=myMap" type="text/javascript">
    </script>
 </head>
<body>
    <script>
      function myMap() {
     var mapProp= {
     center:new google.maps.LatLng(37.00,22.077462),
    zoom:15,
    };
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
    </script>
    <div class="container" id="fh5co-contact-section">
    <div class="row">
    <div class="col-md-3 col-md-push-1 animate-box">
    <h3>Our Address</h3>
    <ul class="contact-info">
    <li><i class="icon-mail"></i><a href="#">test@gmail.com</a></li>
    <li><i class="icon-globe2"></i><a href="#">www.test.com</a></li>
    </ul>
    </div>
    <div class="col-lg-9 col-md-6 col-sm-9 col-xs-12">  

    <div id="googleMap" style="width:100px;height:450px;"></div> 
    </div>
    </div>
    </div>
</body>
</html>

Answer 1

检查Google控制台中的错误。删除缩放属性后的逗号。确保指定＆＃34; googleMap＆＃34;的大小。 div，API不会自动设置大小。此外，确保您已注册API使用并导入了正确的库：

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

点击此处查看简单示例： https://developers.google.com/maps/documentation/javascript/examples/map-simple

如果您尚未获得API密钥并导入其库，请参阅以下链接： https://developers.google.com/maps/documentation/javascript/get-api-key

Google地图未使用div显示在HTML中

1 个答案: