Ошибка initMap is not a function (Использование Google Api)

278
29 декабря 2017, 01:56

Может быть кто-то сталкивался с этой ошибкой..... Она меня скоро убьет, подозреваю, что именно она вызывает баг приложения.

Ошибка initMap is not a function

Вот веб-приложение на хостинге

https://mazservices.000webhostapp.com/

Подключаю скрипты в html

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

file.jsТут устанавливаю параметры дивов в зависимости от высоты и ширины экрана

Вот главный исполняющий файл

 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++) { 
 
            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) 
    }

READ ALSO
unserialize работа с массивом данных

unserialize работа с массивом данных

Есть stringИспользую unserialize() чтобы превратить в массив

260
Не работает запрос с русскими буквами в mysql

Не работает запрос с русскими буквами в mysql

У меня есть Ajax запрос на страницеОчень простой

327
Yii2, организация переводов, теория

Yii2, организация переводов, теория

Теоретический вопрос по организации переводовВсе тексты переводов будут храниться в файлах, на весь проект их планируется около 2+ тыс

265