Google maps route walking

by oterox

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB6YAqeEFMu0ohvdr8h2Z6jhJW17pQSeII&amp;sensor=false"></script>
<p>center</p>

<div id="map-canvas"></div>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>

CSS

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

#map-canvas {  height: 100%;  }

JavaScript

jQuery(document).ready(function() {

		$('p').on('click', function(){
			
      //map.fitBounds(bounds);
		});
    
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
									zoom: 8,
									center: {lat: 36.99764400000001, lng: -3.177965900000004}
								});

								setMarkers(map);


  
								// Datos de los markers: nombre, Lat, Lng y el zIndex para el orden
								// en que sale cada marker uno encima de otro
								// ['Flamenco en el Sacromonte', 37.1757759, -3.587759099999971, 1]
								function setMarkers(map) {
									var coordenadas = [['Monasterio de San Jerónimo, la joya renacentista', 37.179229, -3.603882999999996, 1, 'https://bcexperiences.com/planes/monasterio-de-san-jeronimo/', 'https://bcexperiences.com/wp-content/uploads/2018/09/marker-interes-1.png'],
                  ['Plaza de Bib-Rambla, espejo de la historia milenaria de Granada', 37.1753234, -3.5997800000000097, 1, 'https://bcexperiences.com/planes/plaza-bib-rambla/', 'https://bcexperiences.com/wp-content/uploads/2018/09/marker-interes-1.png']];
									// Adds markers to the map.

									
									// Shapes definen la region clickable de la imagen. El type define un 
									// <area> html como tipo 'poly' que traza un polígono como 
									// una serie de coordenadas X,Y
									// La coordenada final cierra el polígono conectando con la primera coordenada.
									var shape = {
										coords: [1, 1, 1, 69, 48, 69, 48, 1],
										type: 'poly'
									};
                  
                  var bounds = new google.maps.LatLngBounds();
                  var markers = [];
                  var lat_lng = new Array();
                  
									for (var i = 0; i < coordenadas.length; i++) {
										var coordenada = coordenadas[i];

										var myLatLng = new google.maps.LatLng(coordenada[1], coordenada[2]);
                    lat_lng.push(myLatLng);
										bounds.extend(myLatLng);

										var image = {
											url:...