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=AIzaSyAJKHmMyUkGyvinWnKpHqlF6OF-e0KYHTo&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: 12,
  15.             zoomControl: true,
  16.             mapTypeId: 'roadmap',
  17.             zoomControlOptions: {
  18.                 style: google.maps.ZoomControlStyle.DEFAULT,
  19.             },
  20.             disableDoubleClickZoom: true,
  21.             mapTypeControl: false,
  22.             scaleControl: true,
  23.             scrollwheel: false,
  24.             panControl: true,
  25.             streetViewControl: true,
  26.             draggable: true,
  27.             overviewMapControl: true,
  28.             overviewMapControlOptions: {
  29.                 opened: false,
  30.             },
  31.             styles: [
  32.                 {
  33.                     "featureType": "administrative",
  34.                     "elementType": "labels.text.fill",
  35.                     "stylers": [
  36.                         {
  37.                             "color": "#444444"
  38.                         }
  39.                     ]
  40.                 },
  41.                 {
  42.                     "featureType": "landscape",
  43.                     "elementType": "all",
  44.                     "stylers": [
  45.                         {
  46.                             "color": "#f2f2f2"
  47.                         }
  48.                     ]
  49.                 },
  50.                 {
  51.                     "featureType": "poi",
  52.                     "elementType": "all",
  53.                     "stylers": [
  54.                         {
  55.                             "visibility": "off"
  56.                         }
  57.                     ]
  58.                 },
  59.                 {
  60.                     "featureType": "road",
  61.                     "elementType": "all",
  62.                     "stylers": [
  63.                         {
  64.                             "saturation": -100
  65.                         },
  66.                         {
  67.                             "lightness": 45
  68.                         }
  69.                     ]
  70.                 },
  71.                 {
  72.                     "featureType": "road.highway",
  73.                     "elementType": "all",
  74.                     "stylers": [
  75.                         {
  76.                             "visibility": "simplified"
  77.                         }
  78.                     ]
  79.                 },
  80.                 {
  81.                     "featureType": "road.arterial",
  82.                     "elementType": "labels.icon",
  83.                     "stylers": [
  84.                         {
  85.                             "visibility": "off"
  86.                         }
  87.                     ]
  88.                 },
  89.                 {
  90.                     "featureType": "transit",
  91.                     "elementType": "all",
  92.                     "stylers": [
  93.                         {
  94.                             "visibility": "off"
  95.                         }
  96.                     ]
  97.                 },
  98.                 {
  99.                     "featureType": "water",
  100.                     "elementType": "all",
  101.                     "stylers": [
  102.                         {
  103.                             "color": "#ec3f92"
  104.                         },
  105.                         {
  106.                             "visibility": "on"
  107.                         }
  108.                     ]
  109.                 }
  110.             ]
  111.         }
  112.         var mapElement = document.getElementById('map');
  113.         var map = new google.maps.Map(mapElement, mapOptions);
  114.         var locations = [
  115.             [
  116.                 '{{ sitename }}',
  117.                 `{{ renderSetting(1, 'content') }}`,
  118.                 '{{ renderSetting(2, 'content') }} or {{ renderSetting(15, 'content') }}',
  119.                 '{{ renderSetting(3, 'content') }}',
  120.                 '{{ renderSetting(4, 'content') }}','{{ renderSetting(5, 'content') }}'
  121.             ]
  122.         ];
  123.         for (i = 0; i < locations.length; i++) {
  124.             if (locations[i][0] == 'undefined') { description = ''; } else {name = locations[i][0]; }
  125.             if (locations[i][1] == 'undefined') { description = ''; } else {description = locations[i][1]; }
  126.             if (locations[i][2] == 'undefined') { telephone = ''; } else { telephone = locations[i][2]; }
  127.             if (locations[i][3] == 'undefined') { email = ''; } else { email = locations[i][3]; }
  129.             var infoWindowContent = '<div id="maps-infowindow" class="leading-normal text-sm">'+
  130.             '<div class="mb-3"><strong>'+name+'</strong>'+'<br/>'+description+'</div>'+
  131.             '<div>'+telephone+'<br/>'+email+'</div>'+
  132.             '</div>';
  133.             var infowindow = new google.maps.InfoWindow({content: infoWindowContent});
  134.             var markericon = {
  135.                 url: "",
  136.                 scaledSize: new google.maps.Size(80, 80)
  137.             };
  138.             marker = new google.maps.Marker({
  139.                 icon: markericon,
  140.                 position: new google.maps.LatLng(locations[i][4], locations[i][5]),
  141.                 map: map,
  142.                 title: locations[i][0],
  143.                 desc: description,
  144.                 tel: telephone,
  145.                 email: email
  146.             });
  147.             marker.addListener('click', function() { infowindow.open(map, marker); });
  148.         }
  149.     }
  150. </script>