hugo-theme/layouts/shortcodes/maps.html

42 lines
1.2 KiB
HTML

<div class="location" >
<link rel="stylesheet" href="{{ "/css/maps.css" | relURL }}" />
<div class="map" >
{{ $apiKey := .Site.Params.apiKey }}
{{ $label := .Get "label" }}
{{ $url := .Get "url" }}
{{ $adr := .Get "address" }}
{{ $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 }}
<img src="{{ $MapApiUrl }}" width=350px />
<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>
</div>