hugo-theme/layouts/shortcodes/maps.html

{{/* Required params. Fail if missing. */}}

{{ $apiKey := .Site.Params.apiKey }}
{{ if not $apiKey }}
  {{ errorf "Error: 'apiKey' is a required site parameter for this shortcode." }}
{{ end }}

{{ $adr := .Get "address" }}
{{ if not $adr }}
  {{ errorf "Error: 'address' is a required parameter for this shortcode." }}
{{ end }}

{{ $path := .Get "path" }}
{{ if not $path }}
  {{ errorf "Error: 'path' is a required parameter for this shortcode." }}
{{ end }}

{{/* Optional params. No error checking. */}}
{{ $label := .Get "label" }}
{{ $url := .Get "url" }}


{{ $adrURL := urlquery $adr }} 
{{ $LLapiURL := printf "https://api.geoapify.com/v1/geocode/search?text=%s&format=json&apiKey=%s" $adrURL $apiKey }}
{{ $data := getJSON $LLapiURL }} 
{{ with index $data.results 0 }}
	{{ $lon := .lon }}
	{{ $lat := .lat }}
	{{ $MapApiUrl := printf "https://maps.geoapify.com/v1/staticmap?style=osm-bright&width=500&height=500&center=lonlat:%f,%f&zoom=12&marker=lonlat:%f,%f;color:%%23ff0000;size:medium&scaleFactor=2&apiKey=%s" $lon $lat $lon $lat $apiKey }}
<blockquote>
	<div class="map" >
	{{ with resources.GetRemote $MapApiUrl }}
 		{{ with resources.Copy $path . }}
  			{{ with .Err }}
    			{{ errorf "%s" . }}
  			{{ else }}
		<img src="{{ .RelPermalink }}" width=350px />
  			{{ end }}
			{{ else }}
  			{{ errorf "Unable to get remote resource %q" $MapApiUrl }}
			{{ end }}
		{{ end }}

		<div class="map-txt-grid">
			<div class="grid-item">
				{{ with $label }}
				<p><b>{{ $label }}</b></p>
				{{ end }}
			</div>
			<div class="grid-item"><p>{{ .address_line1 }}<br/>{{ replaceRE `, United States of America$` "" .address_line2 }}</p></div>
{{end}}
			<div class="grid-item">
				<div class="child-element"> 
					{{ with $url }}
					<a class="map-button" href="{{ $url }}" target="_blank">See on Google Maps</a>
					{{ end }}
				</div>
			</div>
		</div> 
	</div>
</blockquote>