templates/theme/default/component-blocks/contact-map-block.html.twig line 1

Open in your IDE?
  1. {% set parametre = site_parameters.getParameters() %}
  3. {% if param_contact.typeMap == 0 %}
  4. <div id="googlemap2024"></div>
  5. {% else %}
  6. {% if param_contact and param_contact.actifMap == 1 %}
  9. {% if param_contact.typeMap == 1 and param_contact.iframeMap != "" %}
  10. <iframe class="iframe-map" src="{{param_contact.iframeMap}}" width="100%" height="450" style="border:0;" allowfullscreen loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  11. {% elseif (param_contact.typeMap == 2) %}
  13. <section id="map" style="width: 100%; height: 400px;"></section>
  14. <script src="{{asset('templates/front/'~ app.request.server.get('APP_THEME') ~'/assets/js/jquery-3.6.0.min.js')}}" ></script>
  15. <script type="text/javascript">
  16. $(function(){
  17. var map = L.map('map',{scrollWheelZoom:false}).setView([{{param_contact.latitude}}, {{param_contact.longitude}}], {{param_contact.zoomMap}});
  18. L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
  20. {% if contacts %}
  21. {% for contact in contacts %}
  22. var MarkerAdresse = L.marker([{{contact.latitude}}, {{contact.longitude}}], {draggable:false}).addTo(map).bindPopup("<b>{{contact.nomcontact}}</b><br />{{contact.adresse}} <br /> {{contact.codepostal}} {{contact.ville}} {{contact.pays}}").openPopup();
  23. {% endfor %}
  24. {% endif %}
  26. });
  28. </script>
  30. <Link rel="stylesheet" type="text/css" href="{{asset('templates/front/'~ app.request.server.get('APP_THEME') ~'/assets/plugins/leaflet/leaflet.css')}}" />
  31. <script src="{{asset('templates/front/'~ app.request.server.get('APP_THEME') ~'/assets/plugins/leaflet/leaflet.js')}}"></script>
  33. {% elseif (param_contact.typeMap == 3 and param_contact.imageMap != "") %}
  34. <img class="image-map-contact lazyload" data-srcset="{{asset(param_contact.imageMap)}}" src="{{asset(param_contact.imageMap)}}" alt="Map" />
  36. {% elseif (param_contact.typeMap == 4) %}
  37. <section id="map" style="width: 100%; height: 400px;"></section>
  38. <script src="https://maps.googleapis.com/maps/api/js?key={{parametre.clemap}}"></script>
  40. <script>
  42. var map = new google.maps.Map(document.getElementById('map'), {
  43. zoom: {{param_contact.zoomMap}},
  44. center: new google.maps.LatLng({{param_contact.latitude}}, {{param_contact.longitude}}),
  45. mapTypeId: google.maps.MapTypeId.ROADMAP
  46. });
  48. var infowindow = new google.maps.InfoWindow();
  49. var marker, i;
  51. {% for contact in contacts %}
  52. marker = new google.maps.Marker({
  53. position: new google.maps.LatLng({{contact.latitude}}, {{contact.longitude}}),
  54. map: map
  55. });
  57. google.maps.event.addListener(marker, 'click', (function(marker, i) {
  58. return function() {
  59. infowindow.setContent("<b>{{contact.nomcontact}}</b><br />{{contact.adresse}} <br /> {{contact.codepostal}} {{contact.ville}} {{contact.pays}}");
  60. infowindow.open(map, marker);
  61. }
  62. })(marker, i));
  64. {% endfor %}
  66. </script>
  68. {% endif %}
  70. {% endif %}
  71. {% endif %}