david hall

Using a Google Map with Micro.blog for the linking articles to and from a map here.

As before, I use the Title for the coordinates - but this time you need to pass an idividual "ID" for each marker - so I use the sanitised date as required by Hugo.

As before, within your Micro.blog Domain & Design section, create a new page, call it what you want i.e. Map! and leave it blank. Then go to your Custom themes and alter the following templates:

layouts/post/single.html

{{ define "main" }}
<div class="content post h-entry">
    {{ if .Title }}
    <h1 class="page-title">{{ .Title }}</h1>
    {{ end }}
    <div class="e-content">
{{ .Content }}
    {{ if .Title }}
    <p>Map: <a href="https://spotthehall.net/map/?{{ .Title | safeURL }},16">{{ .Title }}</a></p>
    {{ end }}
    </div>
    <div class="post-date">
        <time class="dt-published" datetime="{{ .Date.Format "2006-01-02 15:04:05 -0700" }}">{{ .Date.Format "Jan 2, 2006" }}</time>
        </div>
    </div>
{{ end }}

layouts/_default/list.html

{{ define "main" }}
<div class="content list h-feed">

    {{ $paginator := .Paginate (where .Data.Pages.ByDate.Reverse "Type" "post") (index .Site.Params "archive-paginate" | default 25) }}
    {{ range $paginator.Pages  }}

    <div class="list-item h-entry">
    {{ if .Title }}
    <h1 class="page-title">{{ .Title }}</h1>
    {{ end }}
<div class="content post e-content">
    {{ .Content }}
    {{ if .Title }}
    <p>Map: <a href="https://spotthehall.net/map/?{{ .Title | safeURL }},16">{{ .Title }}</a></p>
    {{ end }}
</div>
<div class="list-post-date">
  <a href="{{ .Permalink }}" class="u-url"><time class="dt-published" datetime="{{ .Date.Format "2006-01-02 15:04:05 -0700" }}">{{ .Date.Format "Jan 2, 2006" }}</time></a>
</div>
</div>

{{ end }}

</div>

{{ end }}

layouts/_default/single.html

{{ define "main" }} 

<div class="content page">
   <div id="map"></map>
   <p> </p>
</div>

<script type="text/JavaScript">
    if (location.search.substring(1)) {
        var qs = location.search.substring(1);
        var url = qs.split(',',3);
        var lat = parseFloat(url[0]);
        var lng = parseFloat(url[1]);
        var zmn = parseFloat(url[2]);
        var vars = url.vars;
    }
    else {
        var lat = 54.51619919437978;
        var lng = -1.8707656860351562;
        var zmn = 6;
        var map;
    }

    function initMap() {
    map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(lat,lng),
        zoom: zmn,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    });

    {{ $list := (where .Site.Pages "Type" "post") }} {{ range $list }}{{ if.Title }}
    var marker{{ .Date.Format "20060102"  | safeJS }} = new google.maps.Marker({
        position: new google.maps.LatLng({{ .Title  | safeJS  }}),
        map: map,
        icon: "https://davidhall.me/media/images/blue.png",
        title: "{{ .Date.Format "2006-01-02" }}"
    });
    var infowindow{{ .Date.Format "20060102"  | safeJS }} = new google.maps.InfoWindow({
        content: ("<h2><a href='{{ .Permalink }}'>{{ .Date.Format "2006-01-02" }}</a></h2>")
    });
    google.maps.event.addListener(marker{{ .Date.Format "20060102"  | safeJS }}, 'click', function() {
        infowindow{{ .Date.Format "20060102"  | safeJS }}.open(map,marker{{ .Date.Format "20060102"  | safeJS }});
    });
    {{ end}} {{ end }}

}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key={-- YOUR MAP KEY --}&callback=initMap"
async defer></script>

{{ end }}

I've centred and zoomed the map on the UK - guess by the spelling ;)

Get a Map API Key here.