Replacing Default Controls

by designworksinteractive

HTML

<div id="map"></div>
<!-- Hide controls until they are moved into the map. -->
<div style="display:none">


  <div class="controls zoom-control ">
    <button class="zoom-control-in AnimationRipple" title="Zoom In">+</button>
    <button class="zoom-control-out AnimationRipple" title="Zoom Out">−</button>
  </div> 
  
  <div class="controls maptype-control maptype-control-is-map">
    <button class=" maptype-control-map"
            title="Show road map">MAP</button>

      <select id="style-selector" class="gm-dropdown AnimationRipple">
        <option value="map_style_trip" selected="selected">TRIP</option>
        <option value="map_style_place">PLACE</option>
  
      </select>
  
    <button class="maptype-control-satellite AnimationRipple"
            title="Show satellite imagery">SATELLITE</button>
  </div>
  <div class="controls fullscreen-control">
    <button title="Toggle Fullscreen">
      <div class="fullscreen-control-icon fullscreen-control-top-left"></div>
      <div class="fullscreen-control-icon fullscreen-control-top-right"></div>
      <div class="fullscreen-control-icon fullscreen-control-bottom-left"></div>
      <div class="fullscreen-control-icon fullscreen-control-bottom-right"></div>
    </button>
  </div>
</div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>

<div>
						  
									  
                <li id="1" class="MapMarker" data-lat="23.113593" data-lng="-82.366596" data-tripstage="1" data-tripstagenights="9" data-placename="Havana" data-hotelname="Hostal El Comendador" data-description="Havana" data-listtitle="Havana"><a href="#stage101">stage 101 (stage 1 - Havana)</a></li>
									   
                </li>
                <li id="2" class="MapMarker" data-lat="22.616705" data-lng="-83.710499" data-tripstage="2" data-tripstagenights="4" data-placename="Vinales"...

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */



#map {
  height: 60%;}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.hide { visibility: hidden; }
button:focus {outline: 0;}

.gm-dropdown{
  border: 0;
  outline: 0;
    display: inline-block;
  font-size: .5em;
  margin: 0 1px;
  padding: 0 6px;
}

.gm-style .controls {
  font-size: 28px;  /* this adjusts the size of all the controls */
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
  box-sizing: border-box;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 300;
  height: 1em;
  margin: 6px;
  text-align: center;
  user-select: none;
  padding: 2px;
  width: 1em;
  opacity:.6;

}
.gm-style .controls button {
  border: 0;
  background-color: white;
  color: rgba(0, 0, 0, 0.6);

}
.gm-style .controls button:hover {
  color: rgba(0, 0, 0, 0.9);
  cursor:pointer;
}

.gm-style .controls.zoom-control {
  display: flex;
  flex-direction: row;
  width: auto;
  height: auto;

}
.gm-style .controls.zoom-control button {
  font-size: 0.85em;
  margin: 0px;
  padding:5;
  font-family: 'Open Sans', sans-serif;
  
}

.gm-style .controls.maptype-control {
  display: flex;
  flex-direction: row;
  width: auto;
}
.gm-style .controls.maptype-control button {
  display: inline-block;
  font-size: 0.5em;
  margin: 0 1px;
  padding: 0 6px;
}
.gm-style .controls.maptype-control.maptype-control-is-map .maptype-control-map {
  font-weight: 700;
}
.gm-style .controls.maptype-control.maptype-control-is-satellite .maptype-control-satellite {
  font-weight: 700;
}

.gm-style .controls.fullscreen-control button {
  display: block;
  font-size: 1em;
  height: 100%;
  width: 100%
}
.gm-style .controls.fullscreen-control .fullscreen-control-icon {
  border-style: solid;
  height: 0.25em;
  position:absolute;
  width: 0.25em;
}
.gm-style .controls.fullscreen-control .fullscreen-control-icon.fullscreen-control-top-left {
 ...

JavaScript

var map;
function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
  zoom: 6,
 scrollwheel: true,
  draggable: true,
 gestureHandling: 'cooperative',
    disableDefaultUI: false,
          zoomControl: false,
  mapTypeControl: false,
  scaleControl: false,
  streetViewControl: true,
  rotateControl: true,
  fullscreenControl: false,
    center: CUBA,
     restriction: {
    latLngBounds: CUBA_BOUNDS,
    strictBounds: false,}
  });
            var mappoint_havana = new google.maps.LatLng(23.113593, -82.366596);
            var mappoint_vinales = new google.maps.LatLng(22.616705, -83.710499);
            var mappoint_cienfuegos = new google.maps.LatLng(22.145595, -80.435028);
            var mappoint_bayamo = new google.maps.LatLng(20.376814, -76.642256);
            var mappoint_baracoa = new google.maps.LatLng(20.347481, -74.502382);
  

  
    //LINES
            var lineSymbol = {
  path: google.maps.SymbolPath.CIRCLE,
                        strokeColor: '#1565C0',
                strokeOpacity: 1,
                strokeWeight: 3,
                fillOpacity: 1,
                fillColor: '#1565C0'

            };

            var lineSymbol2 = {
     path: google.maps.SymbolPath.CIRCLE,
                        strokeColor: '#063536 ',
                strokeOpacity: .9,
                strokeWeight: 2,
                fillOpacity: .9,
                fillColor: '#0d787b'

            };

            var line = new google.maps.Polyline({
                strokeColor: '#1565C0',
                strokeOpacity: 1.0,
                strokeWeight: 6
            });

function animateCircle(line) {
    var count = 0;
    window.setInterval(function() {
      count = (count + 1) % 200;

      var icons = line.get('icons');
      icons[0].offset = (count / 2) + '%';
      line.set('icons', icons);
  }, 40);
}

// Create the polyline and add the symbol via the 'icons' property.


            var lineCoordinates1 = [
             ...