Map with Marker

by Vyacheslav Yashnikov

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id="level-1">Уровень 1</button>
<button id="level-2">Уровень 2</button>
<button id="level-3">Уровень 3</button><br>
<button id="msk-njk">Москва – Нижнекамск</button>
<p>
  Время в полёте: 1 ч 45 мин
</p>
<button id="stmb-njk">Стамбул – Нижнекамск</button>
<p>
  Время в полёте: 3 ч 55 мин
</p>
<button id="kzn-njk">Казань – Нижнекамск</button>
<p>
  Время в полёте: 55 мин
</p>
<button id="nbch-njk">Набережные челны – Нижнекамск</button>
<p>
  Время в полёте: 55 мин
</p>
<button id="alm-njk">Альматевск – Нижнекамск</button>
<p>
  Время в полёте: 55 мин
</p><button class="route" data-route_start="55.609599, 51.869925" data-route_end="55.607357, 49.279521">Нижнекамск - Аэропорт "Казань"</button><button class="route" data-route_start="55.609599, 51.869925" data-route_end="55.788955, 49.098134">Нижнекамск - Железнодорожный вокзал</button>
<button class="route" data-route_start="55.609599, 51.869925" data-route_end="55.720705, 51.697481">Нижнекамск - Федеральная трасса М7</button>
<button class="route" data-route_start="55.609599, 51.869925" data-route_end="55.773509, 49.091372">Нижнекамск - Крупнейший в регионе грузовой терминал на р.Кама</button>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">


</script>

CSS

#map {
  height: 400px;
  width: 100%;
}

p {
  display: inline;
}

JavaScript

var map;
var markers = [];
var allMarkers = [];
var flightPath;
var flightPath2;
var kznLine;
var nbchLine;
var directionsService;
var directionsDisplay;
var almLine;
var msk = {
  lat: 55.089960,
  lng: 36.601557
};
var njk = {
  lat: 55.609599,
  lng: 51.869925
};
var stmb = {
  lat: 41.009128,
  lng: 28.976446
};
var alm = {
  lat: 54.901314,
  lng: 52.287963
};
var kzn = {
  lat: 55.830917,
  lng: 49.071925
};
var nbch = {
  lat: 55.709614,
  lng: 52.370180
};
var styles = [{
    "elementType": "geometry",
    "stylers": [{
      "color": "#f5f5f5"
    }]
  },
  {
    "elementType": "labels.icon",
    "stylers": [{
      "visibility": "off"
    }]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [{
      "color": "#616161"
    }]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [{
      "color": "#f5f5f5"
    }]
  },
  {
    "featureType": "administrative.country",
    "elementType": "geometry.stroke",
    "stylers": [{
      "color": "#a3a3a3"
    }]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "labels.text.fill",
    "stylers": [{
      "color": "#bdbdbd"
    }]
  },
  {
    "featureType": "administrative.province",
    "elementType": "geometry.stroke",
    "stylers": [{
      "color": "#b2b2b2"
    }]
  },
  {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [{
      "color": "#eeeeee"
    }]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [{
      "color": "#757575"
    }]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [{
      "color": "#e5e5e5"
    }]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [{
      "color": "#9e9e9e"
    }]
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [{
      "color": "#ffffff"
    }]
  },
  {
    "featureType": "road.arterial",
    "elementType": "labels.text.fill",
    "stylers":...