Valkentocht GPS

by PhilQ

HTML

<svg version="1.1" id="valk" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 100 29.85" style="enable-background:new 0 0 100 29.85;" xml:space="preserve">
<style type="text/css">
	.st1{opacity:0.2;}
</style>
<path id="valkouter" fill="currentColor" class="st0" d="M0,22.45c0,0,21.56,7.42,43.62,7.4C76.15,29.82,100,14.92,100,14.92S76.15,0.03,43.62,0C21.56-0.02,0,7.4,0,7.4
	V22.45z"/>

<path id="valkoutera" fill="currentColor" class="st0" d="M0,22.45c0,0,21.56,7.42,43.62,7.4"/>

<path id="valkouterb" fill="currentColor" class="st0" d="M43.6224,29.847C76.15,29.82,100,14.92,100,14.92"/>

<path id="valkouterc" fill="currentColor" class="st0" d="M100,14.92C100,14.92,76.15,0.03,43.62,0"/>

<path id="valkouterd" fill="currentColor" class="st0" d="M43.62,0C21.56-0.02,0,7.4,0,7.4"/>

<path class="st1" d="M17.47,22.58C22.83,23.72,30.42,25,43.43,25c14.35,0,23.15-5.04,23.15-5.04V9.89c0,0-8.8-5.04-23.15-5.04
	c-13.01,0-20.6,1.28-25.96,2.42V22.58z"/>
</svg>



<div id="map-canvas"></div>

<script defer src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap"></script>
<!--
key=YOUR_API_KEY&
-->

CSS

.color {
	color: #FEF1E6;
}

#valk {
	opacity: 0;
	position: absolute;
	z-index: -1;
	pointer-events: none;
}

#map-canvas { 
	height: 400px;
	width: 500px;
}

JavaScript

var map;
// https://snazzymaps.com/editor/edit-my-style/333529
var mapStyles = [
    {
        "featureType": "administrative",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "color": "#808080"
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "color": "#aaaaaa"
            }
        ]
    }
];
var shapePoints = [];
var startR = 80;
var strokeWidth = 1;

function getCurrentScale() {
	return Math.min(Infinity, Math.max(0.25, 0.8*Math.pow(2, (map.getZoom()-20)) ));
}

function rotatePoint(x, y, centerx, centery, degrees) {
	// Thanks to: https://stackoverflow.com/a/45649110/2142071
	var newx = (x - centerx) * Math.cos(degrees * Math.PI / 180) - (y - centery) * Math.sin(degrees * Math.PI / 180) + centerx;
	var newy = (x - centerx) * Math.sin(degrees * Math.PI / 180) + (y - centery) * Math.cos(degrees * Math.PI / 180) + centery;
	return [newx, newy];
}

function createShapePoints() {
	// Thanks to: https://stackoverflow.com/a/53415424/2142071
	var NUM_POINTS = 6;
	["a", "b", "c", "d"].forEach(function(l) {
		var path = document.getElementById("valkouter" + l);
		var len = path.getTotalLength();
		for (var i= 0; i < NUM_POINTS; i++) {
			var pt = path.getPointAtLength(i * len / (NUM_POINTS-1));
			shapePoints.push(pt.x, pt.y);
		}
	});
	shapePoints.push(shapePoints[0], shapePoints[1]);
}

function createMap() {
    return new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 20-4, //-6,
        mapTypeId: 'terrain',
		styles: mapStyles,
        center: new google.maps.LatLng(0,0),
		rotateControl: false,
		streetViewControl: false,
		scaleControl: false,
		zoomControl: false,
		mapTypeControlOptions: { style:...