Google Maps API error: initMap is not a function

Question

I got a problem with my google maps markers. They still work, but I get the following output in the dev console:

maps.php:43 Uncaught SyntaxError: Unexpected token ,

This is this line in my code:

center: {lat: <?php echo $e[0]; ?>, lng: <?php echo $e[1]; ?>}

And the next error message is:

message
:
"initMap is not a function"
name
:
"InvalidValueError"
stack
:
"Error↵    at new mc (https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:47:499)↵    at Object._.nc (https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:48:96)↵    at $g (https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:98:420)↵    at https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:138:53↵    at Object.google.maps.Load (https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:21:5)↵    at https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:137:20↵    at https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:138:68

I am not getting the error I made, here is my JS code:

<script async defer
                    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
            </script>
            <script>
                function initMap() {
                    var map = new google.maps.Map(document.getElementById('map'), {
                        zoom: 10,
                        center: {lat: <?php echo $e[0]; ?>, lng: <?php echo $e[1]; ?>}
                    }); 

                    // Create an array of alphabetical characters used to label the markers. 

                    // Add some markers to the map.
                    // Note: The code uses the JavaScript Array.prototype.map() method to
                    // create an array of markers based on a given "locations" array.
                    // The map() method here has nothing to do with the Google Maps API.

                    var infoWin = new google.maps.InfoWindow();

                    var markers = locations.map(function (location, i) {

                        var marker = new google.maps.Marker({
                            position: location, 
                        });                        

                        google.maps.event.addListener(marker, 'click', function (evt) {
                            infoWin.setContent("<div style='color: black;'><p style='font-size:1.5em;'>"+ location.date +"</p><h2>" + location.headline + "</h2><h3>" + location.subheadline + "</h3><p style='font-size:1.2em;'><strong>Start:</strong> "+ location.start +" Uhr</br><strong>Ende:</strong> "+ location.end +" Uhr</p><hr><p>" + location.text + "</p><hr><p style='font-size: 1.2em;'><strong>Adresse:</strong></br>" + location.street + " " + location.streetnr + ", " + location.plz + " " + location.city + "\n\
                                        </p><a style='font-size: 1.2em;' target='blank_' href='http://www.google.com/maps/place/" + location.lat + "," + location.lng + "'>Routenführung</a></div>");
                            infoWin.open(map, marker);
                        })

                        return marker;

                    });

                    console.log(markers);

                    // Add a marker clusterer to manage the markers.
                    var markerCluster = new MarkerClusterer(map, markers,
                            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
                }
                var locations = <?php echo json_encode($r); ?>
                console.log(locations);

            </script>

The problem is that I have 56 markers, but only 27 are showing up. I think there is a problem maybe with the data. Can it? I searched but not found a smiliar problem like mine.

wich are the values of lat and lng, are they correct? seems like a parsing problem — caryarit ferrer, Aug 04 '17 at 11:40

score 1 · Answer 1 · answered Aug 04 '17 at 11:50

1

There was an data error while parsing. Not Lat or Lng was set at some data ...

answered Aug 04 '17 at 11:50

yfain

509
7
23

what exactly was the issue? i'm experiencing the same thing but with Google autocomplete. it was all working fine forever. i didn't change anything and then all of a sudden it starts crapping out – oldboy Oct 20 '17 at 06:30
My problem was that the coordinates werenot formatted in the right way. – yfain Oct 20 '17 at 07:14

score 1 · Answer 2 · edited Sep 29 '22 at 08:20

1

did you try to define your function initMap before you execute the script from the Google Maps API?

Just move this line to the end of the file.

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

edited Sep 29 '22 at 08:20

Yrll

1,619
2
5
19

answered Aug 04 '17 at 12:01

user7646788

116
1
2

That I have also tested. The problem was that some fields of my array had lat: 0 and lng: 0. – yfain Aug 04 '17 at 12:06

score 0 · Answer 3 · answered Aug 04 '17 at 14:17

You need to define your functions first like I have done below in the sample code.

function GoogleDistanceService() {
    var map;
    var directionDisplay;
    var distanceOption;
    var directionsService = new google.maps.DirectionsService();

    return {
        "initializeLoad": function (mapContext) {
            directionDisplay = new google.maps.DirectionsRenderer();
            var chicago = new google.maps.LatLng(35.220033, -50.5500100);
            var mapOptions = {
                zoom: 6,
                center: newyork
            };
            map = new google.maps.Map(mapContext, mapOptions);
            directionDisplay.setMap(map);

            ////////////////// here put code to hide your map div 

        },
        "callBack": function (response, status) {
            var distance = "";
            if (status != google.maps.DistanceMatrixStatus.OK) {
                distanceOption.errorCallBack(null);
            }
            else {
                var origins = response.originAddresses;
                var destinations = response.destinationAddresses;

        /////////// here show your map div

                for (var i = 0; i < origins.length; i++) {
                    var results = response.rows[i].elements;
                    for (var j = 0; j < results.length; j++) {
                        distance = results[j].distance.text.replace(" km", "") * 0.62137;
                    } 
                } 
            } 
            distanceOption.updatedCallBack({ "start": distanceOption.start, "end": distanceOption.end, "distance": distance });
        },
        "MapLoad": function (option) {
            distanceOption = option;
            this.initializeLoad(option.mapContext);
            var service = new google.maps.DistanceMatrixService();
            var request = { origin: option.start, destination: option.end, travelMode: google.maps.TravelMode.DRIVING };

            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionDisplay.setDirections(response);
                }
            });

            service.getDistanceMatrix({
                origins: [option.start],
                destinations: [option.end],
                travelMode: google.maps.TravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.METRIC,
                avoidHighways: false,
                avoidTolls: false
            }, this.callBack);
        }
    };    
};

score -1 · Answer 4 · edited Sep 28 '22 at 14:46

You Calling the Function before it create. after create initMap function call it just like that:
<script src="js/jquery.min.js"></script>
1st create function: 
<script>
                function initMap() {
                    var map = new google.maps.Map(document.getElementById('map'), {
                        zoom: 10,
                        center: {lat: <?php echo $e[0]; ?>, lng: <?php echo $e[1]; ?>}
                    }); 

                    // Create an array of alphabetical characters used to label the markers. 

                    // Add some markers to the map.
                    // Note: The code uses the JavaScript Array.prototype.map() method to
                    // create an array of markers based on a given "locations" array.
                    // The map() method here has nothing to do with the Google Maps API.

                    var infoWin = new google.maps.InfoWindow();

                    var markers = locations.map(function (location, i) {

                        var marker = new google.maps.Marker({
                            position: location, 
                        });                        

                        google.maps.event.addListener(marker, 'click', function (evt) {
                            infoWin.setContent("<div style='color: black;'><p style='font-size:1.5em;'>"+ location.date +"</p><h2>" + location.headline + "</h2><h3>" + location.subheadline + "</h3><p style='font-size:1.2em;'><strong>Start:</strong> "+ location.start +" Uhr</br><strong>Ende:</strong> "+ location.end +" Uhr</p><hr><p>" + location.text + "</p><hr><p style='font-size: 1.2em;'><strong>Adresse:</strong></br>" + location.street + " " + location.streetnr + ", " + location.plz + " " + location.city + "\n\
                                        </p><a style='font-size: 1.2em;' target='blank_' href='http://www.google.com/maps/place/" + location.lat + "," + location.lng + "'>Routenführung</a></div>");
                            infoWin.open(map, marker);
                        })

                        return marker;

                    });

                    console.log(markers);

                    // Add a marker clusterer to manage the markers.
                    var markerCluster = new MarkerClusterer(map, markers,
                            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
                }
                var locations = <?php echo json_encode($r); ?>
                console.log(locations);
            </script>
2nd call the function:
<script async defer
                src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
        </script>

Did you had a chance to look at this thread? https://stackoverflow.com/questions/32496382/typeerror-window-initmap-is-not-a-function — Anton, Nov 01 '21 at 13:42

Google Maps API error: initMap is not a function

4 Answers4