Question

  /*style for map*/   
<style>
            /* Always set the map height explicitly to define the size of the div
               * element that contains the map. */
            #map {
                height: 100%;
            }
            /* Optional: Makes the sample page fill the window. */
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>

/* map div*/ 
    <div class="col-md-12">

            <div id="map">

            </div>
        </div>

    <script>
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 7.8731, lng: 80.7718 },
                zoom: 8
            });
        }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAumFScM9gO2DBha7pCNH1ua3tvEWVQMsM&sensor=TRUE" async defer></script>

以上代码适用于我的简单谷歌地图。但是地图没有显示在视野中。但是在使用inspect元素查看地图后，地图会呈现给div。

请建议我解决这个问题。

提前致谢。

Answer 1

喜欢这个

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

Answer 2

＆＃39;回调= initMap＆＃39;因为它将使用回调参数

调用指定的函数而从行中丢失

编辑您的代码，如

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAumFScM9gO2DBha7pCNH1ua3tvEWVQMsM&sensor=TRUE" async defer></script>

到

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

在它开始工作之后。

要更好地了解此链接click here.

谷歌地图是不是渲染成div？

2 个答案: