function initialize() {
  $.getJSON('/getcords', function(data) {
    var markers = [];
    for(var i = 0; i < data.markers.length; i++)
    {
      markers.push({
        latitude: data.markers[i].latitude,
        longitude: data.markers[i].longitude,
      })
    }
    var mapOptions = {
      center: new google.maps.LatLng(52.406374, 16.925168),
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: false,
      draggable: true,
      panControl: true,
      zoomControl: true,
      mapTypeControl: true,
      scaleControl: true,
      streetViewControl: true,
      overviewMapControl: true,
      rotateControl: true,
    };

    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    var dist = 0;
    var lat_lng = new Array();
    var latlngbounds = new google.maps.LatLngBounds();
    for (i = 0; i < markers.length; i++) {
      var data = markers[i]
      var myLatlng = new google.maps.LatLng(data.latitude, data.longitude);
      lat_lng.push(myLatlng);
      var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: data.title
      });
      latlngbounds.extend(marker.position);
      (marker, data);
    }
    map.setCenter(latlngbounds.getCenter());
    map.fitBounds(latlngbounds);

    var path = new google.maps.MVCArray();
    var service = new google.maps.DirectionsService();
    var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });

    for (var i = 0; i < lat_lng.length; i++) {
      if ((i + 1) < lat_lng.length) {
        var src = lat_lng[i];
        var des = lat_lng[i + 1];
        path.push(src);
        poly.setPath(path);
        service.route({
          origin: src,
          destination: des,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
        }, function (result, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
              path.push(result.routes[0].overview_path[i]);
            }

            for(var j = 0; i < result.routes[0].legs.length; j++)
            {
              dist += result.routes[0].legs[j].distance.value;

            }
              $('#distance').text(dist + " KM");
          }
        });
      }
    }

    marker = new google.maps.Marker({
      map:map,
      position: new google.maps.LatLng(markers[markers.length-1].latitude, markers[markers.length-1].longitude),
      icon: '/img/maluch_map.png'
    });
  })
}
google.maps.event.addDomListener(window, 'load', initialize);