Kendo Test

by bulutkartal

HTML

<script src="http://cdn.kendostatic.com/2015.1.318/js/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>

<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>

<script async defer>
var map;
var chicago = {lat: 41.85, lng: -87.65};




function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
		    lat: -6,
		    lng: 2
		  }
  });

  // Turf format :Lon, Lat		
var start = [-5, -6];
var end = [9, -6];
var options = {
  obstacles: turf.polygon([[[0, -7], [5, -7], [5, -3], [0, -3], [0, -7]]]),
  minDistance : 2,
 units: "miles"
};

var path = turf.shortestPath(start, end, options);
     map.data.addGeoJson(path);
     
     var polyCoords = [
          {lat: -7, lng: 0},
          {lat: -3, lng: 0},
          {lat: -3, lng: 5},
          {lat: -7, lng: 5}
        ];

        // Construct the polygon.
        var bpoly = new google.maps.Polygon({
          paths: polyCoords,
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35
        });
        bpoly.setMap(map);
     
  

}
</script>

CSS

#map {
  height: 100%;
}

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