Почему возникает ошибка initMap is not a function?

Question

[Евгений]

Не могу понять смысл ошибки. Уже психи берут...

Выложил на хостинг бесплатный https://mazservices.000webhostapp.com/

Вот код
https://jsfiddle.net/ky3x99qj/

Я так понимаю эти ошибки и вызывают мой баг.

Answer 1

[Immortal_pony]

При подключении google api вы указываете, что должна быть выполнена функцкция initMap вот этим параметром
callback=initMap.
Но в списке подключения у вас file.js и index.js подключаются после скрипта google api. Соотвественно, когда google api подключается, у вас функции initMap еще не существует.

Comments

[Евгений]

Сделал теперь такую последовательность

<script defer src="js/jquery-3.2.1.js"></script>
<script defer src="js/file.js"></script>
<script defer src="js/index.js"></script>
<script  defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAsuS1MqzRBzRv1HRrfrlyoMRlkrVXEx0g&callback=initMap"></script>

Та ошибка пропала, но появилось три новые. Первым подключаю jQuery естественно, так как file.js index.js юзают его. Последним гугловский

Но три ошибки. Первая и последняя ошибка мне не понятна, а вот 2 ошибка парадокс.


По поводу 2 ошибки.
Оно ругается на lat, но не ругается на lng. Это очеееееееень странно)


Вот в консоль вывел Резалт иииии что не так то? Да и если бы оно не подхватывало lat lng , оно бы попросту не строило бы маршрут

[Евгений]

У меня ведь функция InitMap вызывается с параметрами (my_coords,lat,lng) в случае успешного запроса аякс.

Но наблюдаю отладку, сразу при обновлении она underfined,
Но потом всё прекрасно находит

Судя по всему оно пытается достать эту переменную ещё до Аякс запроса.

function myplace()
    {
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                geocoding(position.coords.latitude, position.coords.longitude);
            });
        } else
        {
            console.log("Geolocation API не поддерживается в вашем браузере");
        }
    }

    function geocoding(lat, lon)
    {
        var my_adress;
        var api_key = 'AIzaSyAsuS1MqzRBzRv1HRrfrlyoMRlkrVXEx0g';
        var cordinats = [lat,  lon];
        var loctype = 'ROOFTOP';
        var restype = 'street_address';
        var position = cordinats.join(",");
        var data = {latlng: position, location_type: loctype, result_type: restype, key: api_key};
        $.ajax({
            method: "GET",
            url: "https://maps.googleapis.com/maps/api/geocode/json",
            data: data,
            dataType: 'json',
            success: function (result) {
                console.log(result);
                my_adress = result.results[0].formatted_address;
                my_coords = result.results[0].geometry.location;

                alert("Вы здесь" + " " + "<" + " " + my_adress + " " + ">");
                initMap(my_coords,lat,lon);
            },
            error: function (err) {
                console.log("Ошибка сервера")
            }
        })
    }
    myplace();
    function initMap(coords,lat,lon){
        var latlng = new google.maps.LatLng(lat, lon);
        var map;
        var image = 'images/23.png';
        var basemarker = [

            [53.9143142,27.4173581],
            [53.9251061,27.5888264],
            [53.861006, 27.5692355],
            [53.9098637,27.5348443],
            [53.9351309,27.6492208]
        ];
        //style map
        var mapOptions = {
            center: latlng,
            zoom: 10,
            mapTypeControl: false,
            streetViewControl: false,
            styles: [{"featureType":"water","stylers":[{"saturation":43},{"lightness":-11},{"hue":"#0088ff"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"hue":"#ff0000"},{"saturation":-100},{"lightness":99}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#808080"},{"lightness":54}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ece2d9"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#ccdca1"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#767676"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#b8cb93"}]},{"featureType":"poi.park","stylers":[{"visibility":"on"}]},{"featureType":"poi.sports_complex","stylers":[{"visibility":"on"}]},{"featureType":"poi.medical","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","stylers":[{"visibility":"simplified"}]}]
        };

        map = new google.maps.Map(document.getElementById('map'), mapOptions);

        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title:"Вы знаходитесь в данном месте"
        });
        for (var i = 0; i < basemarker.length; i++) { // отрисовка маркеров на карте
            var dbmarker= basemarker[i];
            var marker1 = new google.maps.Marker({
                position: {lat: dbmarker[0], lng: dbmarker[1]},
                map: map,
                icon:image,
                title: dbmarker[0],

            });
        }



        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer({
            draggable: true,
            map: map,
            panel: document.getElementById('right-panel')
        });


        var closestPointIdx = 0;
        var predict = 0;
        var dist = 0;
        var minDist = 100000;
        for (var i = 0 ; i < basemarker.length; i++) {
            console.log("Переменная",coords);
            var request = {
                origin:   {
                    // "LatLng":

                    "lat" : coords.lat,//координаты начальной точки
                    "lng" : coords.lng,//координаты начальной точки
                },

                destination:{
                    "lat" : basemarker[i][0],//координаты конечной точки
                    "lng" : basemarker[i][1]//координаты конечной точки
                },
                travelMode: 'DRIVING'
            };
            directionsService.route(request, function(response, status) {
                if (status == 'OK') {
                    dist = computeTotalDistance_crutch(response); //ответ отсюда  в массив, находим самое меньшее

                    if  (dist < minDist ) {
                        minDist = dist;

                        closestPointIdx = predict;
                        predict++;
                    }

                    displayRoute(latlng,{lat: basemarker[closestPointIdx][0], lng: basemarker[closestPointIdx][1]} , directionsService,
                        directionsDisplay);



                }
            });

        }
    }
    function displayRoute(origin, destination, service, display) {

        service.route({
            origin: origin,
            destination: destination,

            travelMode: 'DRIVING',
            avoidTolls: true
        }, function(response, status) {
            if (status === 'OK') {
                display.setDirections(response);
            } else {
                console.log('Could not display directions due to: ' + status);
            }
        });
    }

    //Подсчёт расстояния

    function computeTotalDistance_crutch(result) {
        var total = 0;
        var myroute = result.routes[0];
        for (var i = 0; i < myroute.legs.length; i++) {
            total += myroute.legs[i].distance.value;
        }
        total = total / 1000;
        return total;
    }


    function viewRoute()
    {
        $("#right-panel").fadeIn(1000)
    }

[Евгений]

В общем решил я убрать колбек, так как думаю именно там был вызов до аякса. И 2 ошибки пропало. Осталось только это чудо

[Евгений]

Я протестировал, эта ошибка сбоя не вызывает и на телефоне стало отлично работать и всегда правильно строит. Считаю вопрос закрытым, Спасибо за наводку про колбек