TypeError: window.initMap is not a function Google Maps

Question

I'm worsening for a week with updating my marks in google maps. I'm using ajax in an html page. My controller loads data from the database and send it back (code below). I'm now getting this error :

TypeError: window.initMap is not a function

Someone knows the problem? This is my code :

<!DOCTYPE html>
<html>
    <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <style>
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            #map {
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js">
            var map;
            var data;
            function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {
                    center: {lat: -34.397, lng: 150.644},
                    zoom: 8
                });


                httpCall();
            }

            function httpCall($http) {
                $.ajax({
                    type: 'GET',
                    url: '<?php echo site_url('User/marks') ?>',
                    data: "data="+ data,
                    dataType: "json", 
                    success: function(response){
                            alert(data);
                            for (var i = 0, len = data.length; i < len; ++i) {
                                var marker = new google.maps.Marker({
                                    position: {
                                        lat: parseFloat(data[i].lat),
                                        lng: parseFloat(data[i].lng)
                                    },
                                    map: map
                                });
                            }
                        }
            })
            }

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

controller :

function marks() {
    return json_encode(array('data'=>$this->user_model->get_marks()));
}

Have you tried to put that as ``window.initMap = function(){...}`` rather than ``function initMap(){...}`` ? — Alexander Mikhalchenko, Dec 14 '15 at 00:17

score 3 · Answer 1 · edited May 23 '17 at 12:23

My bad I haven't noticed that at first, but you have your script tag kinda combined, so it has both contents and the src attribute.

Check out this question for details.

So, you should split those into two separate scripts.

    <script type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
    <script type="text/javascript">
            var map;
            var data;
            function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {
                    center: {lat: -34.397, lng: 150.644},
                    zoom: 8
                });


                httpCall();
            }

            function httpCall($http) {
                $.ajax({
                    type: 'GET',
                    url: '<?php echo site_url('User/marks') ?>',
                    data: "data="+ data,
                    dataType: "json", 
                    success: function(response){
                            alert(data);
                            for (var i = 0, len = data.length; i < len; ++i) {
                                var marker = new google.maps.Marker({
                                    position: {
                                        lat: parseFloat(data[i].lat),
                                        lng: parseFloat(data[i].lng)
                                    },
                                    map: map
                                });
                            }
                        }
            })
            }

        </script>

Still getting that annoying "TypeError: window.initMap is not a function" error :( — CPlusPlus, Dec 14 '15 at 08:16

TypeError: window.initMap is not a function Google Maps

1 Answers1