{% extends "layout.html" %}
{% block content %}

<div id="map"></div>

{% endblock content %}

{% block js %}
    <script>
    function initMapParaderos(data) {
        
        var center = {lat: data[0][`latitude`], lng: data[0][`longitude`]};
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            mapId: '7e5605b96eebbb2',
            center: center
            });
        
        var infowindow =  new google.maps.InfoWindow({});
        var marker;
        
        data.forEach(e => {
            marker = new google.maps.Marker({ position: new google.maps.LatLng(e[`latitude`], e[`longitude`]), map: map, title: e[`codigo`], });
            
            google.maps.event.addListener(marker, 'click', (function (marker) {
                return function () {
                    infowindow.setContent(`Identificador: ${e[`codigo`]}<br>Comuna: ${e[`comuna`]}<br>Recorridos: ${e[`recorridos`]}<br>Tamaño: ${e[`tamano`]}<br>Capacidad: ${e[`capacidad`]}<br>Material: ${e[`material`]}`);
                    infowindow.open(map, marker);
                    }
                })(marker));
            });
        }

    $.ajax({
        type: `GET`,
        url: `{{url_for('main.listado_paraderos')}}`,
        success: function(response) {
            initMapParaderos(response);
            }
        });
    </script>

{% endblock js %}
