Broken Route & Unclickable Locations on Embedded Map - google-maps

Question

The route found on the embedded google map at the URL below is broken and I would like it to be continuous.
The locations found on the same map are unclickable and I would like them to be clickable.
Map here: https://www.theafricamonth.com/trail1-1 or code below.
Would greatly appreciate someone to shed some knowledge on this. Thanks in advance.
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyDTIfL5nxelK1h8HKkrUDkMn1emcLh-S4I&extension=.js"></script>
<script src="//cdn.mapkit.io/v1/infobox.js"></script>
<link href="//fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
<link href="//cdn.mapkit.io/v1/infobox.css" rel="stylesheet" >
<script>
google.maps.event.addDomListener(window, 'load', init);
var map, markersArray = [];
function bindInfoWindow(marker, map, location) {
google.maps.event.addListener(marker, 'click', function() {
function close(location) {
location.ib.close();
location.infoWindowVisible = false;
location.ib = null;
}
if (location.infoWindowVisible === true) {
close(location);
} else {
markersArray.forEach(function(loc, index) {
if (loc.ib && loc.ib !== null) {
close(loc);
}
});
var boxText = document.createElement('div');
boxText.style.cssText = 'background: #fff;';
boxText.classList.add('md-whiteframe-2dp');
function buildPieces(location, el, part, icon) {
if (location[part] === '') {
return '';
} else if (location.iw[part]) {
switch (el) {
case 'photo':
if (location.photo) {
return '<div class="iw-photo" style="background-image: url(' + location.photo + ');"></div>';
} else {
return '';
}
break;
case 'iw-toolbar':
return '<div class="iw-toolbar"><h3 class="md-subhead">' + location.title + '</h3></div>';
break;
case 'div':
switch (part) {
case 'email':
return '<div class="iw-details"><i class="material-icons" style="color:#4285f4;"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><span>' + location.email + '</span></div>'
break;
case 'web':
return '<div class="iw-details"><i class="material-icons" style="color:#4285f4;"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><span>' + location.web_formatted + '</span></div>';
break;
case 'desc':
return '<label class="iw-desc" for="cb_details"><input type="checkbox" id="cb_details"/><h3 class="iw-x-details">Details</h3><i class="material-icons toggle-open-details"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><p class="iw-x-details">' + location.desc + '</p></label>';
break;
default:
return '<div class="iw-details"><i class="material-icons"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><span>' + location.part + '</span></div>';
break;
}
break;
case 'open_hours':
var items = '';
if (location.open_hours.length > 0) {
for (var i = 0; i < location.open_hours.length; ++i) {
if (i !== 0) {
items += '<li><strong>' + location.open_hours[i].day + '</strong><strong>' + location.open_hours[i].hours + '</strong></li>';
}
var first = '<li><label for="cb_hours"><input type="checkbox" id="cb_hours"/><strong>location.open_hours[0].day</strong><strong>' + location.open_hours[0].hours + '</strong><i class="material-icons toggle-open-hours"><img src="//cdn.mapkit.io/v1/icons/keyboard_arrow_down.svg"/></i><ul>' + items + '</ul></label></li>';
}
return '<div class="iw-list"><i class="material-icons first-material-icons" style="color:#4285f4;"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><ul>' + first + '</ul></div>';
} else {
return '';
}
break;
}
} else {
return '';
}
}
boxText.innerHTML = buildPieces(location, 'photo', 'photo', '') + buildPieces(location, 'iw-toolbar', 'title', '') + buildPieces(location, 'div', 'address', 'location_on') + buildPieces(location, 'div', 'web', 'public') + buildPieces(location, 'div', 'email', 'email') + buildPieces(location, 'div', 'tel', 'phone') + buildPieces(location, 'div', 'int_tel', 'phone') + buildPieces(location, 'open_hours', 'open_hours', 'access_time') + buildPieces(location, 'div', 'desc', 'keyboard_arrow_down');
var myOptions = {
alignBottom: true,
content: boxText,
disableAutoPan: true,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, -40),
zIndex: null,
boxStyle: {
opacity: 1,
width: '280px'
},
closeBoxMargin: '0px 0px 0px 0px',
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: 'floatPane',
enableEventPropagation: false
};
location.ib = new InfoBox(myOptions);
location.ib.open(map, marker);
location.infoWindowVisible = true;
}
});
}
function init() {
var mapOptions = {
center: new google.maps.LatLng(-28.12333312723434, 23.738126687499967),
zoom: 5,gestureHandling: 'auto',fullscreenControl: false,zoomControl: true,
disableDoubleClickZoom: false,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
},
scaleControl: true,
scrollwheel: true,
streetViewControl: false,
draggable: true,
clickableIcons: true,
fullscreenControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_BOTTOM
},
streetViewControlOptions: {
position: google.maps.ControlPosition.RIGHT_BOTTOM
},
mapTypeControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{"featureType":"landscape","stylers":[{"hue":"#FFAD00"},{"saturation":50.2},{"lightness":-34.8},{"gamma":1}]},{"featureType":"road.highway","stylers":[{"hue":"#FFAD00"},{"saturation":-19.8},{"lightness":-1.8},{"gamma":1}]},{"featureType":"road.arterial","stylers":[{"hue":"#FFAD00"},{"saturation":72.4},{"lightness":-32.6},{"gamma":1}]},{"featureType":"road.local","stylers":[{"hue":"#FFAD00"},{"saturation":74.4},{"lightness":-18},{"gamma":1}]},{"featureType":"water","stylers":[{"hue":"#00FFA6"},{"saturation":-63.2},{"lightness":38},{"gamma":1}]},{"featureType":"poi","stylers":[{"hue":"#FFC300"},{"saturation":54.2},{"lightness":-14.4},{"gamma":1}]}]
}
var mapElement = document.getElementById('mapkit-6386');
var map = new google.maps.Map(mapElement, mapOptions);
var locations = [{"title":"Cape Town","address":"Cape Town, South Africa","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":-33.9248685,"lng":18.424055299999964,"photo":"","vicinity":"Cape Town","open_hours":"","marker":{"fillColor":"#F44336","fillOpacity":1,"strokeWeight":0,"scale":1.5,"anchor":{"x":10,"y":30},"origin":{"x":0,"y":0},"style":5},"iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Stellenbosch","address":"Stellenbosch, South Africa","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":-33.9321045,"lng":18.86015199999997,"photo":"","vicinity":"Stellenbosch","open_hours":"","marker":{"fillColor":"#F44336","fillOpacity":1,"strokeWeight":0,"scale":1.5,"anchor":{"x":10,"y":30},"origin":{"x":0,"y":0},"style":5},"iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Wilderness","address":"Wilderness, South Africa","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":-33.9940082,"lng":22.574848100000054,"vicinity":"Wilderness","marker":"","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Port Elizabeth","address":"Port Elizabeth, South Africa","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":-33.9608369,"lng":25.602242299999943,"vicinity":"Port Elizabeth","marker":"","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Two Rivers Rest Camp","address":"Botswana","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":-26.4715622,"lng":20.6237251,"vicinity":"Botswana","marker":"","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Orange River Lodge","address":"South Namibia, Namibia, Noordoewer, Namibia","desc":"","tel":"063 297 012","int_tel":"[phone]","email":"","web":"http://www.orangeriverlodge.com/","web_formatted":"orangeriverlodge.com","open":"","time":"","lat":-28.74396,"lng":17.616750000000025,"vicinity":"South Namibia, Namibia","marker":"","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Windhoek","address":"Windhoek, Namibia","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":-22.5608807,"lng":17.0657549,"vicinity":"Windhoek","marker":"","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}}];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
icon: locations[i].marker,
position: new google.maps.LatLng(locations[i].lat, locations[i].lng),
map: map,
title: locations[i].title,
address: locations[i].address,
desc: locations[i].desc,
tel: locations[i].tel,
int_tel: locations[i].int_tel,
vicinity: locations[i].vicinity,
open: locations[i].open,
open_hours: locations[i].open_hours,
photo: locations[i].photo,
time: locations[i].time,
email: locations[i].email,
web: locations[i].web,
iw: locations[i].iw
});
markersArray.push(marker);
if (locations[i].iw.enable === true){
bindInfoWindow(marker, map, locations[i]);
}
}
arrays = [];
while (locations.length > 0) {
arrays.push(locations.splice(0, 5));
}
for (var i = 0; i < arrays.length; i++) {
makeRoutes(arrays[i]);
}
function makeRoutes(locations) {
var waypts = [];
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true,
preserveViewport: true
});
if (locations.length > 1){
for (var i = 0; i < locations.length; i++) {
waypts.push({
location:new google.maps.LatLng(locations[i].lat, locations[i].lng),
stopover:true
});
}
}
var request = {
origin: new google.maps.LatLng(locations[0].lat, locations[0].lng),
destination: new google.maps.LatLng(locations[locations.length - 1].lat, locations[locations.length - 1].lng),
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
polylineOptions = {
strokeColor: '#80b8ea',
strokeWeight: '6'
}
directionsDisplay.setOptions({
polylineOptions: polylineOptions
});
directionsDisplay.setDirections(response);
}
});
directionsDisplay.setMap(map);
}
}
</script>
<style>
#mapkit-6386 {
height: 400px;
width: 900px;
max-width: 100%;
}
</style>
<div id="mapkit-6386"></div>

Answer 1

Your route is "broken" because that is what your code does. It calls makeRoutes(arrays[i]); where arrays is your locations array split into two pieces.
The markers aren't clickable because the of the following error in the javascript console: Uncaught ReferenceError: InfoBox is not defined because that file (//cdn.mapkit.io/v1/infobox.js) has a syntax error:
Uncaught SyntaxError: Unexpected token export infobox.js:88
And the code that populates the infowindow doesn't work.
proof of concept fiddle