templates/themes/theme/common/map.html.twig line 1

Open in your IDE?
  1. <div id="map"></div>
  3. {# Do not use this API key for production sites - Generate a new key and allow the LIVE and DEV domains #}
  4. {# Get a new API key here: https://developers.google.com/maps/documentation/javascript/get-api-key #}
  5. <script async
  6.     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAFQr5-BviDSycw3hxKecYJoCsTet11WlQ&loading=async&callback=initMap">
  7. </script>
  9. <script type="text/javascript">
  10.     var map;
  11.     function initMap() {
  12.         var mapOptions = {
  13.             center: new google.maps.LatLng({{ renderSetting(4, 'content') }},{{ renderSetting(5, 'content') }}),
  14.             zoom: 14,
  15.             zoomControl: false,
  16.             mapTypeId: 'hybrid',
  17.             zoomControlOptions: {
  18.                 style: google.maps.ZoomControlStyle.DEFAULT,
  19.             },
  20.             disableDoubleClickZoom: true,
  21.             mapTypeControl: false,
  22.             scaleControl: false,
  23.             scrollwheel: false,
  24.             cameraControl: false,
  25.             streetViewControl: false,
  26.             fullscreenControl: false,
  27.             draggable: true,
  28.             overviewMapControl: false,
  29.             overviewMapControlOptions: {
  30.                 opened: false,
  31.             },
  32.             styles: [],
  33.         }
  34.         var mapElement = document.getElementById('map');
  35.         var map = new google.maps.Map(mapElement, mapOptions);
  36.         var locations = [
  37.             [
  38.                 '{{ sitename }}',
  39.                 `{{ renderSetting(1, 'content') }}`,
  40.                 '{{ renderSetting(2, 'content') }}',
  41.                 '{{ renderSetting(3, 'content') }}',
  42.                 '{{ renderSetting(4, 'content') }}','{{ renderSetting(5, 'content') }}'
  43.             ]
  44.         ];
  45.         for (i = 0; i < locations.length; i++) {
  46.             if (locations[i][0] == 'undefined') { description = ''; } else {name = locations[i][0]; }
  47.             if (locations[i][1] == 'undefined') { description = ''; } else {description = locations[i][1]; }
  48.             if (locations[i][2] == 'undefined') { telephone = ''; } else { telephone = locations[i][2]; }
  49.             if (locations[i][3] == 'undefined') { email = ''; } else { email = locations[i][3]; }
  51.             var infoWindowContent = '<div id="maps-infowindow" class="leading-normal text-sm">'+
  52.             '<div class="mb-3"><strong>'+name+'</strong>'+'<br/>'+description+'</div>'+
  53.             '<div>'+telephone+'<br/>'+email+'</div>'+
  54.             '</div>';
  55.             var infowindow = new google.maps.InfoWindow({content: infoWindowContent});
  56.             var markericon = {
  57.                 url: "/images/map-pin.png",
  58.                 scaledSize: new google.maps.Size(60, 60)
  59.             };
  60.             marker = new google.maps.Marker({
  61.                 icon: markericon,
  62.                 position: new google.maps.LatLng(locations[i][4], locations[i][5]),
  63.                 map: map,
  64.                 title: locations[i][0],
  65.                 desc: description,
  66.                 tel: telephone,
  67.                 email: email
  68.             });
  69.             marker.addListener('click', function() { infowindow.open(map, marker); });
  70.         }
  71.     }
  72. </script>