templates/addresse/geocode.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Addresse{% endblock %}
  5. {% block body %}
  6.     <div class="row">
  7.         <div class="col-12">
  8.             <div class="card">
  9.                 <div class="card-body">
  10.                     <h4>Geocoder l'adresse : {{ addresse.toString() }}</h4>
  11.                     <div class="row">
  12.                         <div class="col-lg-12">
  13.                             <div class="card">
  14.                                 <div class="card-body">
  15.                                     <h4 class="card-title mb-4">Adresses trouvées :</h4>
  16.                                     <div class="row">
  17.                                         <div class="col-md-6">
  18.                                             <div>
  19.                                                 <form  method="post" action="{{ path('app_addresse_geocode', {'id': addresse.id }) }}" />
  20.                                                     {% for possibilite in possibilites %}
  21.                                                     <div class="form-check mb-2">
  22.                                                         <input class="form-check-input" type="radio" name="geocodingChoice" id="geocodingChoice{{ loop.index  }}" {% if loop.index == 1%}checked="checked"{% endif %} value="{{ possibilite.lat }}||{{ possibilite.lon }}" />
  23.                                                         <label class="form-check-label" for="geocodingChoice{{ loop.index }}" onclick="showme({{ loop.index - 1 }});">
  24.                                                            {{ possibilite.label }}  ( Score: {{ possibilite.score|round(3, 'floor') }})
  25.                                                         </label>
  26.                                                     </div>
  27.                                                     {% endfor %}
  28.                                                     <input type="hidden" name="_token" value="{{ csrf_token('geocode' ~ addresse.id) }}">
  29.                                                     <button class="btn btn-primary" type="submit">Choisir</button>
  30.                                                 </form>
  31.                                             </div>
  32.                                         </div>
  33.                                         <div class="col-md-6">
  34.                                             <div class="card">
  35.                                                 <div class="card-body">
  36.                                                     <div id="map" class="gmaps"></div>
  37.                                                 </div>
  38.                                             </div>
  39.                                         </div>
  40.                                     </div>
  42.                                     <script type="text/javascript">
  44.                                        function initMap() {
  45.                                         var locations = [
  46.                                             {% for possibilite in possibilites %}
  47.                                                 ['{{ possibilite.label }}', {{ possibilite.lat }},{{ possibilite.lon }}, 4],
  48.                                             {% endfor %}
  49.                                         ];
  51.                                         var bounds = new google.maps.LatLngBounds();
  52.                                         var markers = [];
  54.                                         var map = new google.maps.Map(document.getElementById('map'), {
  55.                                             zoom: 10,
  56.                                             center: new google.maps.LatLng(-33.92, 151.25),
  57.                                             mapTypeId: google.maps.MapTypeId.ROADMAP
  58.                                         });
  60.                                         var infowindow = new google.maps.InfoWindow();
  62.                                         var marker, i;
  64.                                         for (i = 0; i < locations.length; i++) {
  65.                                             marker = new google.maps.Marker({
  66.                                                 position: new google.maps.LatLng(locations[i][1], locations[i][2]),
  67.                                                 map: map
  68.                                             });
  70.                                             google.maps.event.addListener(marker, 'click', (function(marker, i) {
  71.                                                 return function() {
  72.                                                     infowindow.setContent(locations[i][0]);
  73.                                                     infowindow.open(map, marker);
  74.                                                 }
  75.                                             })(marker, i));
  77.                                             markers.push(marker);
  79.                                             bounds.extend(marker.position);
  80.                                         }
  82.                                         map.fitBounds(bounds);
  85.                                         showme = function (index) {
  87.                                             markers[index].setAnimation(google.maps.Animation.DROP);
  88.                                             //markers[index].setAnimation(null);
  90.                                             /*
  91.                                             if (markers[index].getAnimation() != google.maps.Animation.DROP) {
  92.                                                 markers[index].setAnimation(google.maps.Animation.DROP);
  93.                                             } else {
  94.                                                 markers[index].setAnimation(null);
  95.                                             }*/
  96.                                         }
  100.                                        }
  102.                                        $( document ).ready(function() {
  103.                                            window.initMap = initMap;
  104.                                        });
  105.                                     </script>
  107.                                 </div>
  108.                             </div>
  109.                         </div>
  110.                     </div>
  113.                 </div>
  114.             </div>
  115.         </div>
  116.     </div>
  118. {% endblock %}