@evgen9586
Backend-dev. Лублу Enterprise и не люблю понты)

Реально ли сделать Jquery сворачивание блоков, в которые попадают данные Google Api?

Суть такова.
Есть веб-приложение, которое определяет где ты находишься и строит тебе путь к ближайшему сервисному центру. В общем то, что google карты с браузера довольно тормозят это полбеды.

Но реально ли средствами jQuery toogle сделать, чтобы блок с маршрутом изначально был скрыт и выдвигался из стороны по кнопке или свайпу? Пытался делать, не желает работать

Html

<html>
<head>
    <meta charset="UTF-8">
    <title>Route Aplication</title>
    <link media="screen" href="demo/styles/demo.css" type="text/css" rel="stylesheet" />
    <link rel="shortcut icon" href="http://www.rudebox.org.ua/wp-content/themes/mystique/favicon.ico" />
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>

<br><br>
<div id="map"></div>
<div id='right-panel'>
    <p>Дистанция до ближайшего СЦ:  <span id="total"></span></p>
</div>







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

Css
html,
body {
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0;

  color: #000;
  overflow:  hidden;
}

#right-panel {
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select, #right-panel input {
  font-size: 30px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}

#map {
  margin-left: 10%;
  height: 100%;
  float: left;
  width: 50%;
  height: 100%;
}
#right-panel {
  float: right;
  width: 34%;
  height: 100%;
}


js
$(document).ready(function(){
    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;

                console.log("Вы здесь" + " " + "<" + " " + my_adress + " " + ">");
                /-----------------------GMaps Initialization-------------------------------/
                function initMap() {
                    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')
                    });
                    console.log(google.maps.DirectionsService);
                    directionsDisplay.addListener('directions_changed', function() {

                        computeTotalDistance(directionsDisplay.getDirections());
                    });

                    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" : my_coords.lat,//координаты начальной точки
                            "lng" : my_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(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;
                    document.getElementById('total').innerHTML = total + ' км ';
                }
                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;
                }


                initMap();


            },
            error: function (err) {
                console.log("Ошибка сервера")
            }
        })
    }
    myplace();
  
});


Может быть кто-то знает как это сделать
  • Вопрос задан
  • 58 просмотров
Пригласить эксперта
Ответы на вопрос 1
@tyzberd
делайте resize после показа блока
google.maps.event.trigger(map, 'resize');
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы