templates/addresses_list/show_addresses_maps.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Maps{% endblock %}
  5. {% block body %}
  6. <div class="row">
  7.     <div class="col-12">
  8.         <div class="card">
  9.             <div class="card-body">
  10.                 <div id="map" style="min-height: 600px; width: 100%" ></div>
  12.                 <br/>
  13.                 <a class="btn btn-outline-secondary waves-effect"  href="{{ path('app_addresses_list_index') }}">Revenir à la liste</a>
  14.             </div>
  15.         </div>
  16.     </div>
  17. </div>
  20.     <script type="text/javascript">
  22.         function initMap() {
  24.             var locations = [
  25.                 {% for addresse in addresses_list.getAddresses() %}
  26.                 ['{{ addresse.address }} {{ addresse.zipcode }} {{ addresse.city }}', {{ addresse.lat }},{{ addresse.lon }}, 4],
  27.                 {% endfor %}
  28.             ];
  30.             var bounds = new google.maps.LatLngBounds();
  31.             var markers = [];
  33.             var map = new google.maps.Map(document.getElementById('map'), {
  34.                 zoom: 10,
  35.                 center: new google.maps.LatLng(-33.92, 151.25),
  36.                 mapTypeId: google.maps.MapTypeId.ROADMAP
  37.             });
  39.             var infowindow = new google.maps.InfoWindow();
  41.             var marker, i;
  43.             for (i = 0; i < locations.length; i++) {
  44.                 marker = new google.maps.Marker({
  45.                     position: new google.maps.LatLng(locations[i][1], locations[i][2]),
  46.                     map: map
  47.                 });
  49.                 google.maps.event.addListener(marker, 'click', (function (marker, i) {
  50.                     return function () {
  51.                         infowindow.setContent(locations[i][0]);
  52.                         infowindow.open(map, marker);
  53.                     }
  54.                 })(marker, i));
  56.                 markers.push(marker);
  58.                 bounds.extend(marker.position);
  59.             }
  61.             map.fitBounds(bounds);
  63.         }
  65.         $( document ).ready(function() {
  66.             window.initMap = initMap;
  67.         });
  68.     </script>
  70. {% endblock %}