title: Broken Route & Unclickable Locations on Embedded Map
body: <p>The route found on the embedded google map at the URL below is broken and I would like it to be continuous.</p>
  
  <p>The locations found on the same map are unclickable and I would like them to be clickable. </p>
  
  <p>Map here: <a href="https://www.theafricamonth.com/trail1-1" rel="nofollow noreferrer">https://www.theafricamonth.com/trail1-1</a> or code below.</p>
  
  <p>Would greatly appreciate someone to shed some knowledge on this. Thanks in advance.</p>
  
  <pre><code>    &lt;script src="//maps.googleapis.com/maps/api/js?key=AIzaSyDTIfL5nxelK1h8HKkrUDkMn1emcLh-S4I&amp;extension=.js"&gt;&lt;/script&gt;
      &lt;script src="//cdn.mapkit.io/v1/infobox.js"&gt;&lt;/script&gt;
      &lt;link href="//fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet"&gt;
      &lt;link href="//cdn.mapkit.io/v1/infobox.css" rel="stylesheet" &gt;
  
  
      &lt;script&gt;
        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 &amp;&amp; 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 '&lt;div class="iw-photo" style="background-image: url(' + location.photo + ');"&gt;&lt;/div&gt;';
                        } else {
                          return '';
                        }
                        break;
                      case 'iw-toolbar':
                        return '&lt;div class="iw-toolbar"&gt;&lt;h3 class="md-subhead"&gt;' + location.title + '&lt;/h3&gt;&lt;/div&gt;';
                        break;
                      case 'div':
                        switch (part) {
                          case 'email':
                            return '&lt;div class="iw-details"&gt;&lt;i class="material-icons" style="color:#4285f4;"&gt;&lt;img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/&gt;&lt;/i&gt;&lt;span&gt;&lt;a href="mailto:' + location.email + '" target="_blank"&gt;' + location.email + '&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;'
                            break;
                          case 'web':
                            return '&lt;div class="iw-details"&gt;&lt;i class="material-icons" style="color:#4285f4;"&gt;&lt;img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/&gt;&lt;/i&gt;&lt;span&gt;&lt;a href="' + location.web + '" target="_blank"&gt;' + location.web_formatted + '&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;';
                            break;
                          case 'desc':
                            return '&lt;label class="iw-desc" for="cb_details"&gt;&lt;input type="checkbox" id="cb_details"/&gt;&lt;h3 class="iw-x-details"&gt;Details&lt;/h3&gt;&lt;i class="material-icons toggle-open-details"&gt;&lt;img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/&gt;&lt;/i&gt;&lt;p class="iw-x-details"&gt;' + location.desc + '&lt;/p&gt;&lt;/label&gt;';
                            break;
                          default:
                            return '&lt;div class="iw-details"&gt;&lt;i class="material-icons"&gt;&lt;img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/&gt;&lt;/i&gt;&lt;span&gt;' + location.part + '&lt;/span&gt;&lt;/div&gt;';
                            break;
                        }
                        break;
                      case 'open_hours':
                        var items = '';
                        if (location.open_hours.length &gt; 0) {
                          for (var i = 0; i &lt; location.open_hours.length; ++i) {
                            if (i !== 0) {
                              items += '&lt;li&gt;&lt;strong&gt;' + location.open_hours[i].day + '&lt;/strong&gt;&lt;strong&gt;' + location.open_hours[i].hours + '&lt;/strong&gt;&lt;/li&gt;';
                            }
                            var first = '&lt;li&gt;&lt;label for="cb_hours"&gt;&lt;input type="checkbox" id="cb_hours"/&gt;&lt;strong&gt;location.open_hours[0].day&lt;/strong&gt;&lt;strong&gt;' + location.open_hours[0].hours + '&lt;/strong&gt;&lt;i class="material-icons toggle-open-hours"&gt;&lt;img src="//cdn.mapkit.io/v1/icons/keyboard_arrow_down.svg"/&gt;&lt;/i&gt;&lt;ul&gt;' + items + '&lt;/ul&gt;&lt;/label&gt;&lt;/li&gt;';
                          }
                          return '&lt;div class="iw-list"&gt;&lt;i class="material-icons first-material-icons" style="color:#4285f4;"&gt;&lt;img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/&gt;&lt;/i&gt;&lt;ul&gt;' + first + '&lt;/ul&gt;&lt;/div&gt;';
                        } 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":"+264 63 297 012","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 &lt; 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 &gt; 0) {
            arrays.push(locations.splice(0, 5));
          }
  
          for (var i = 0; i &lt; 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 &gt; 1){
              for (var i = 0; i &lt; 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);
          }
  
          }
      &lt;/script&gt;
  
      &lt;style&gt;
        #mapkit-6386 {
          height: 400px;
          width: 900px;
          max-width: 100%;
        }
      &lt;/style&gt;
  
      &lt;div id="mapkit-6386"&gt;&lt;/div&gt;
  </code></pre>