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() }}
  35. <script>
  37. $(window).on('load', function() {
  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 %}