templates/includes/mapa_javascript.html.twig line 1

  1. {% if oficinasMapa is defined %}
  2. {% set slug = app.request.attributes.get('slugO') %}
  3. <script>
  4. function initMap() {  
  5.     const map = new google.maps.Map(document.getElementById("map"), {
  6.         zoom: {%if oficinasMapa|length > 1%}6{%else%}10{%endif%},
  7.         center: {%if oficinasMapa|length > 1%}{ lat: 40.4165, lng: -3.70256 }{%elseif oficinasMapa[0].latitud%}{ lat: {{oficinasMapa[0].latitud}}, lng: {{oficinasMapa[0].longitud}} }{%endif%},
  8.     });
  9.     
  10.     var styledMapType = new google.maps.StyledMapType(styleMapDefault);
  11.     
  12.     map.mapTypes.set('styled_map', styledMapType);
  13.     map.setMapTypeId('styled_map');
  14.     var markers = [];
  15.     
  16.     {% for oficina in oficinasMapa %}
  17.     {% if oficina.latitud and oficina.slug %}
  18.     
  19.     {% apply spaceless %}
  20.         const contentString{{ oficina.id }} = 
  21.         '<div class="card card-mapa" tabindex="0" style="border:none;display: flex;flex-direction: row;"><div class="izq" style="padding: 10px;"><a href="{{ path('ficha_oficina', {slugP: oficina.localidad.provincia.slug, slugL: oficina.localidad.slug, slugO: oficina.slug} ) }}">{% if oficina.imagenMapa %}<img src="{{ sonata_path(oficina.imagenMapa, 'smallN') }}" style="width: fit-content;height: 100%;"/>{% else %}<b>{{ oficina.nombre }}</b>{% endif %}</a></div><div class="der" style="display: flex;flex-direction: column;max-width: 230px;"><img src="/img/logo_azul.svg" style="width: 160px;"/><p style="margin: 0;font-size: 20px;font-weight: bold;color: #1C3264;margin-top: 8px;">{{ oficina.provincia.nombre }}</p><p style="margin-bottom: 10px;font-size: 20px;font-weight: 400;color: #1C3264;">{{ oficina.nombre }}</p>{% if oficina.slug != slug %}<a href="{{ path('ficha_oficina', {slugP: oficina.localidad.provincia.slug, slugL: oficina.localidad.slug, slugO: oficina.slug} ) }}" style="text-decoration: none;font-size: 17px;font-weight: bold;color: #1C3264;"><b>Seleccionar Oficina</b></a>{% else %}<a target="_blank" href="https://www.google.com/maps/dir/Current+Location/{{ oficina.latitud }},{{ oficina.longitud }}" style="text-decoration: none;font-size: 17px;font-weight: bold;color: #1C3264;">{{ '¿Cómo llegar? >' | trans}}</a>{% endif %}</div></div>';
  22.     {% endapply %}
  23.         const infowindow{{ oficina.id }} = new google.maps.InfoWindow({
  24.             content: contentString{{ oficina.id }},
  25.         });
  27.         
  28.         const marker{{ oficina.id }} = new google.maps.Marker({
  29.             position: { lat: {{ oficina.latitud }}, lng: {{ oficina.longitud }} },
  30.             map: map,
  31.             title: '{{ oficina.nombre }}',
  32. {#             icon: '{{ absolute_url(asset('/img/locMap.svg')) }}' #}
  33.             icon: {
  34.                 url: '{{ absolute_url(asset('/img/locMap.svg')) }}',
  35.                 scaledSize: new google.maps.Size(50, 60),
  36.             }
  38.         });
  39.         
  40.         infowindow{{ oficina.id }}.addListener('closeclick', ()=>{
  41.         });
  42.         
  43.         marker{{ oficina.id }}.addListener("click", () => {
  44.             infowindow{{ oficina.id }}.open({
  45.             anchor: marker{{ oficina.id }},
  46.             map,
  47.             shouldFocus: false,
  48.             });
  49.         });
  50.         
  51.         markers.push(marker{{ oficina.id }});
  52.     
  53.     {% endif %}
  55.   {% endfor %}
  57.   var markerCluster = new MarkerClusterer(map, markers,
  58.         {imagePath: '/img/m'});
  59. }
  60. </script>
  61. {% endif %}