Google maps Type Error: a is null

Question

I have looked at similar questions and can't seem to find a solution. I am using UserFrosting which is based on TWIG/Slim framework. My code is below, and produces the following error with no map displaying.

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>

Possible duplicate of http://stackoverflow.com/questions/5478450/google-map-error-a-is-null — Rob M., Aug 21 '15 at 16:03

score 1 · Accepted Answer · answered Aug 22 '15 at 15:45

1

You should not be expecting a response directly from MarkersController.php if you are using UserFrosting/Slim properly.

Supposing your MarkersController.php has a method like getMarkersJSON() that generates the JSON data you need, you need to create a route in your index.php like this:

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

Then in your jQuery call to getJSON, you would do something like:

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

You can test that your route is working properly by simply navigating to http://example.com/markers/json and ensuring that you see the raw data you expect.

I would advise you to take a look at the UserFrosting documentation to make sure you understand the front controller pattern.

answered Aug 22 '15 at 15:45

alexw

8,468
6
54
86

alexw - Cheers! Have a better understanding now. However, when I navigate to /markers/json I get no output and the console shows 'The character encoding of the html document was not declared...' despite there being no html in MarkersController.php. – fst104 Aug 26 '15 at 13:31
Well it is supposed to output JSON, not HTML, right? You probably just need to set the headers. Take a look at http://docs.slimframework.com/response/headers/ (since UF is built on Slim) – alexw Aug 26 '15 at 14:05
Do i set the header within MarkersController? Or within the route in index.php? – fst104 Aug 26 '15 at 17:14
Either way, but I would probably do it inside `MarkerController`. Go ahead and mark this answer as "accepted", and then feel free to join us in chat: https://gitter.im/alexweissman/UserFrosting – alexw Aug 26 '15 at 18:16

score 0 · Answer 2 · answered Aug 21 '15 at 16:14

0

you should pass your function in the src attribute, like this:

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

and here is a working example.

answered Aug 21 '15 at 16:14

Shimon Brandsdorfer

1,673
9
23

in order to help you with the markers, please give me an example of the JSON you get from the `MarkersController.php` file. – Shimon Brandsdorfer Aug 21 '15 at 16:31

Google maps Type Error: a is null

2 Answers2