44 lines
1.4 KiB
HTML
44 lines
1.4 KiB
HTML
{% 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 %}
|