templates/debug/positions.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  5.     <div class="page">
  6.         <div class="container">
  7.             <div class="row animated fadeIn delay-0-2s">
  8.                 <div class="col-12 mb-3 mb-lg-5">
  9.                     <div class="">
  10.                         <h2>All positions on {{ "now"|date("Y-m-d") }}</h2>
  11.                     </div>
  13.                     <hr></hr>
  14.                 </div>
  15.             </div>
  16.         </div>
  17.         <div class="container pb-5">
  18.             <div class="row">
  19.                 <div class="col-12">
  20.                     {% if positionGpsListArray %}
  21.                         <div class="animated fadeIn delay-0-8s" style="width: 100%; height: 70vh;" id="map"></div>
  22.                     {% else %}
  23.                         <div class="text-center animated fadeIn delay-0-4s" style="font-size: 30px;">No data...</div>
  24.                     {% endif %}
  25.                 </div>
  26.             </div>
  27.         </div>
  28.     </div>
  30. {% endblock %}
  32. {% block javascripts %}
  33.     {{ parent() }}
  34.     
  35.     <script>
  37.         $(window).on('load', function() {
  38.             
  40.             var positions = {{ positionGpsListArray|json_encode()|raw }};
  41.             initMap();
  43.             function initMap() {
  44.                 //var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  45.                 var mapOptions = {
  46.                   zoom: 16,
  47.                   center: new google.maps.LatLng(positions[0][0],positions[0][1])
  48.                 }
  49.                 var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  51.                 var markers = [];
  53.                 positions.forEach(function(element) {
  54.                     markers.push(new google.maps.Marker({
  55.                         position: new google.maps.LatLng(element[0], element[1]),
  56.                         title: element[2] + " - " + element[0] + " - " + element[1]
  57.                     }));
  58.                 });
  60.                 // To add the marker to the map, call setMap();
  61.                 //markers[0].setMap(map);
  62.                 //marker2.setMap(map);
  64.                 markers.forEach(function(element) {
  65.                     element.setMap(map);
  66.                 });
  67.             }
  68.         });
  70.     </script>
  72. {% endblock %}