来源

Question

我想显示一张Google地图-但是，后者没有填写（没有显示Google的徽标，也没有显示城市，街道等）。控制台中没有错误。这是问题的说明：

Google map shown empty

来源

以下代码是摘录。未显示诸如<body>之类的标签。

<div style="width: 500px; height: 500px;">
            <div style="width: 500px; height: 500px;" id="page-gaz-de-ville-map"></div>
        </div>
        <script type="text/javascript">
            $(document).ready(function() {
                var map;

                $.getScript('https://maps.googleapis.com/maps/api/js?key=XYZ', initMap);

                function initMap() {

                    var clusterStyles = [];

                    var mapstyles = [];

                    map = new google.maps.Map(document.getElementById('page-gaz-de-ville-map'), {
                        styles : mapstyles
                    });
                }

            });
                </script>

问题

这是一个伪造的API密钥。为什么地图为空，我该如何解决该问题？

Answer 1

我建议将js文件加载为：

Code   Name
1000   XXX
1000   XXX
1000   XXX
1050   XXX
1050   XXX
1100   YYY
...

这应该确保延迟加载，我猜您正在尝试通过<script async defer src=".....key=XYZ&callback=initMap"></script>调用来实现。

并在head标记中的脚本元素处定义initMap函数。帮了我大忙。

Answer 2

请输入以下代码，

<!--- First of all need to add below script  --->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=Your Key&v=3&libraries=places,visualization"></script>

<!--- Below code is used to invoke the google map --->
<script type="text/javascript">
    $(document).ready(function() {
        myLatlng = new google.maps.LatLng(64485, 2674827.909);

        var myOptions = {
            zoom: 18,
            zoomControl: true,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        myMarker = new google.maps.Marker({
            position: myLatlng
        });
        myMarker.setMap(map);
    });
</script>

<!--- Html code --->
<div style="width: 600px; height: 400px;" id="map_canvas"></div>

如果您有任何疑问，请告诉我。

Answer 3

这实际上是您想要的。 首先您必须添加HTML，BODY标签，然后必须导入JQuery插件（$（document）为JQuery）

$(document).ready(function () {
        var map;
        $.getScript('https://maps.googleapis.com/maps/api/js?key=XYZ', initMap);
        function initMap() {
            var myOptions = {
            zoom: 12,
            center: new google.maps.LatLng(9.981496491854426, 76.30557754516597),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('page-gaz-de-ville-map'), myOptions);
        }
    });

Answer 4

您需要generate an api key。

并用您的密钥替换javascript调用中的XYZ。

Google地图已显示但为空

来源

问题

4 个答案: