David Hall

Tuesday, June 18, 2019

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

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

###layouts/_default/list.html

&#123;&#123; define "main" }}
<div class="content list h-feed">

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

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

&#123;&#123; end }}

</div>

&#123;&#123; end }}

###layouts/_default/single.html

&#123;&#123; 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
   	});

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

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

&#123;&#123; end }}

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

Get a Map API Key here.