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