谷歌地图类型错误：a 为空答案

【问题标题】：Google maps Type Error: a is null谷歌地图类型错误：a 为空
【发布时间】：2015-11-15 15:47:39
【问题描述】：

我查看了类似的问题，但似乎无法找到解决方案。我正在使用基于 TWIG/Slim 框架的 UserFrosting。我的代码如下，并产生以下错误，不显示地图。

TypeError: a is null1 main.js:19:628

<!DOCTYPE html>
<html lang="en">
    {% include 'components/head.html' %}

    <body>
        <div id = "wrapper">
            {% include 'components/nav-account.html' %}
            <div id = "page-wrapper">
                {% include 'components/alerts.html' %}

                <div class = "container">
                    <style type = "text/css">
                        html, body, #map-canvas{ height:100%;
                                                 margin:0;
                                                 padding:0;
                        }
                    </style>

                    <script type = "text/javascript"
                            src = "https://maps.googleapis.com/maps/api/js?
                            key=AIzaSyB76xBqfQdgOLV77VK3JZ09vWwk8brkMFs">
                    </script>
                    <script type="text/javascript">
                        var map = null;
                        var iLoadPoints = 0;
                        function addMarker(lat, lng) {
                            marker = new google.maps.Marker({
                                position: new google.maps.LatLng(lat, lng),
                                map: map,
                            });
                        }


                        function initialize() {
                            var mapOptions = {
                                center: {lat: 54.872128, lng: -6.284874},
                                zoom: 13
                            };
                            map = new google.maps.Map(document.getElementById('map-canvas'),
                                    mapOptions);


                            $(document).ready(function () {

                                $.getJSON('MarkersController.php', function (data) {


                                    var locations = JSON.parse(data);

                                    for (var i = 0; i < locations.length; i++) {
                                        addMarker(locations[i].lat, locations[i].lng);
                                    }
                                });
                            });


                        }


                        google.maps.event.addListenerOnce(map, 'idle', function () {
                            iLoadPoints += 1;
                            if (iLoadPoints === 2) {
                                initialize();
                            }
                        });

                        google.maps.event.addDomListener(window, 'load', function () {
                            iLoadPoints += 1;
                            if (iLoadPoints === 2) {
                                initialize();
                            }
                        });



                    </script>

                    <div id="map-canvas" style="height:600px; width:600px;
                         margin-top:100px; margin-bottom: 100px;
                         ">

                    </div>
                </div>
                {% include 'components/footer.html' %}    

            </div>
        </div>
    </body>

</html>

【问题讨论】：

stackoverflow.com/questions/5478450/google-map-error-a-is-null的可能重复

标签： javascript google-maps google-maps-api-3 slim userfrosting

【解决方案1】：

如果您正确使用 UserFrosting/Slim，则不应期待来自 MarkersController.php 的直接回复。

假设您的MarkersController.php 有一个类似getMarkersJSON() 的方法来生成您需要的JSON 数据，您需要在您的index.php 中创建一个路由，如下所示：

$app->get('/markers/json/?', function () use ($app) {
    $controller = new UF\MarkersController($app);
    return $controller->getMarkersJSON();
});

然后在您对getJSON 的 jQuery 调用中，您会执行以下操作：

$.getJSON('/markers/json', function (data) {
    ...
});

您只需导航至http://example.com/markers/json 并确保您看到预期的原始数据，即可测试您的路线是否正常工作。

我建议您查看UserFrosting documentation 以确保您了解前端控制器模式。

【讨论】：

alexw - 干杯！现在有了更好的理解。但是，当我导航到 /markers/json 时，我没有得到任何输出，并且控制台显示“未声明 html 文档的字符编码......”尽管 MarkersController.php 中没有 html。
它应该输出 JSON，而不是 HTML，对吧？您可能只需要设置标题。看看docs.slimframework.com/response/headers（因为 UF 是基于 Slim 构建的）
我是否在 MarkersController 中设置标题？还是在 index.php 中的路由内？
无论哪种方式，但我可能会在MarkerController 内部进行。继续将此答案标记为“已接受”，然后随时加入我们的聊天：gitter.im/alexweissman/UserFrosting

【解决方案2】：

你应该在 src 属性中传递你的函数，像这样：

src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyB76xBqfQdgOLV77VK3JZ09vWwk8brkMFs&callback=initialize"

这是一个有效的example。

【讨论】：

为了帮助你做标记，请给我一个你从MarkersController.php文件中得到的JSON示例。