{{ with .Site.Params.Map }}
  <div id="map" class="box"></div>
  {{ if eq .service "osm" }}
    {{ $js := $.Site.Data.libs.js }}
    {{ $css := $.Site.Data.libs.css }}
    {{ "<!-- OpenStreetMap -->" | safeHTML }}
		{{ printf "<link rel=\"stylesheet\" href=\"//unpkg.com/leaflet@%s/dist/leaflet.css\" integrity=\"%s\" crossorigin=\"anonymous\"/>" $css.leaflet.version $css.leaflet.integrity | safeHTML }}
    {{ printf "<script src=\"//unpkg.com/leaflet@%s/dist/leaflet.js\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" $js.leaflet.version $js.leaflet.integrity | safeHTML }}
    <script>
        var loc = [{{- float .latitude -}}, {{- float .longitude -}}];
        var mymap = L.map("map").setView(loc, {{- int .zoom -}});
        L.tileLayer(
          "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
          {
            attribution:
              'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
              maxZoom: {{- int .zoom -}}
            }
        ).addTo(mymap);
          var marker = L.marker(loc).addTo(mymap);
    </script>
  {{ else if eq .service "google" }}
    {{ $opt := "" }}
    {{ if isset . "language" }}{{ $opt = print $opt "&language=" .language }}{{ end }}
    {{ if isset . "region" }}{{ $opt = print $opt "&region=" .region }}{{ end }}
    {{ "<!-- Google Map -->" | safeHTML }}
    <script>
        var map;
        var centre = {lat: {{- float .latitude -}}, lng: {{- float .longitude -}}};
        function initMap() {
          map = new google.maps.Map(document.getElementById('map'), {
            center: centre,
            zoom: {{- float .zoom -}}
          });
          marker = new google.maps.Marker({position: centre, map: map});
        }
      </script>
      <script src="https://maps.googleapis.com/maps/api/js?key={{- .api_key -}}{{- safeURL $opt -}}&callback=initMap"
      async defer></script>
  {{ else if eq .service "mapbox" }}
    {{ printf "<meta name=\"viewport\" content=\"initial-scale=1,maximum-scale=1,user-scalable=no\" />" | safeHTML }}
    {{ printf "<script src=\"https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js\"></script>" | safeHTML }}
    {{ printf "<link href=\"https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css\" rel=\"stylesheet\" />" | safeHTML }}
    <style>
      body { margin: 0; padding: 0; }
      #map { top: 0; bottom: 0; padding: 0; width: 100%; }
    </style>
    <script>
      var loc = [{{- float .longitude -}}, {{- float .latitude -}}];
      mapboxgl.accessToken = "{{- .api_key -}}";

      var geojson = {
        type: 'FeatureCollection',
        features: [{
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [{{- float .longitude -}}, {{- float .latitude -}}],
          },
          properties: {
            title: "{{- .marker_title -}}",
            description: "{{- .marker_address -}}"
          }
        }]
      };

      var map = new mapboxgl.Map({
        container: 'map', // container id
        style: "{{- safeHTML .style_url  -}}", // stylesheet location
        center: loc, // starting position [lng, lat]
        zoom: {{- int .zoom -}} // starting zoom
      });

      // add markers to map
      geojson.features.forEach(function(marker) {

      // create a HTML element for each feature
      var el = document.createElement('div');
      el.className = 'marker';

      // make a marker for each feature and add to the map
      new mapboxgl.Marker(el)
        .setLngLat(marker.geometry.coordinates)
        .addTo(map);

      if (marker.properties.title || marker.properties.description) {
        new mapboxgl.Marker(el)
          .setLngLat(marker.geometry.coordinates)
          .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
            .setHTML('<h4>' + marker.properties.title + '</h4><div>' + marker.properties.description + '</div>'))
          .addTo(map);
      }
      });

      map.addControl(new mapboxgl.NavigationControl());
    </script>
  {{ end }}
{{ end }}