Maybe someone faced this error ..... She will kill me soon, I suspect that it is she who causes the application bug.

InitMap error is not a function

Here is a web hosting application

https://mazservices.000webhostapp.com/ 

I connect scripts in 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 Here I set the parameters of divs depending on the height and width of the screen

Here is the main executable

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

    1 answer 1

    The trick is that when the Google Maps API is loaded, the initMap function is executed. If you do not have the initMap function, or it is called later, not framed by braces as a procedure, then there will be an error initmap is not a function. Here we have analyzed in detail: https://stackoverflow.com/questions/32496382/typeerror-window-initmap-is-not-a-function