import { Component, OnInit } from '@angular/core';
declare var google: any;

@Component({
  selector: 'app-spec-dev',
  templateUrl: './spec-dev.component.html',
  styleUrls: ['./spec-dev.component.scss']
})
export class SpecDevComponent implements OnInit {

  constructor() { }
 
  locality:any;
  latlong(){
    initializeAutocomplete();
    function initializeAutocomplete(){
        var input = document.getElementById('locality');
        // var options = {
        //   types: ['(regions)'],
        //   componentRestrictions: {country: "IN"}
        // };
        var options = {}
    
        var autocomplete = new google.maps.places.Autocomplete(input, options);
    
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
          var place = autocomplete.getPlace();
          var lat = place.geometry.location.lat();
          var lng = place.geometry.location.lng();
          var placeId = place.place_id;
          // to set city name, using the locality param
          var componentForm = {
            locality: 'short_name',
          };
          for (var i = 0; i < place.address_components.length; i++) {
            var addressType = place.address_components[i].types[0];
            if (componentForm[addressType]) {
              var val = place.address_components[i][componentForm[addressType]];
             /*  document.getElementById("city").value = val; */
             console.log(val);
            }
          }
          console.log(lat);
          console.log(lng);
          console.log(placeId);
         /*  document.getElementById("latitude").value = lat;
          document.getElementById("longitude").value = lng;
          document.getElementById("location_id").value = placeId; */
        });
      }
  }
  drawRoute(){
    
    var markers = [
/*       {
          "title": 'Alibaug',
          "lat": '18.641400',
          "lng": '72.872200',
           }
  , */
      {
          "title": 'Mumbai',
          "lat": '18.964700',
          "lng": '72.825800',
         /*  "description": 'Mumbai formerly Bombay, is the capital city of the Indian state of Maharashtra.'
    */   }
  ,
      {
          "title": 'Pune',
          "lat": '18.523600',
          "lng": '73.847800',
          /* "description": 'Pune is the seventh largest metropolis in India, the second largest in the state of Maharashtra after Mumbai.'
      */ }
];
window.onload = function () {
  var mapOptions = {
      center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
  var infoWindow = new google.maps.InfoWindow();
  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.lat, data.lng);
      lat_lng.push(myLatlng);
      var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
       //   title: data.title
      });
      latlngbounds.extend(marker.position);
      (function (marker, data) {
          google.maps.event.addListener(marker, "click", function (e) {
          //    infoWindow.setContent(data.description);
            //  infoWindow.open(map, marker);
          });
      })(marker, data);
  }
  map.setCenter(latlngbounds.getCenter());
  map.fitBounds(latlngbounds);

  //***********ROUTING****************//

  //Initialize the Path Array
  var path = new google.maps.MVCArray();

  //Initialize the Direction Service
  var service = new google.maps.DirectionsService();

  //Set the Path Stroke Color
  var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });

  //Loop and Draw Path Route between the Points on MAP
  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]);
                  }
              }
          });
      }
  }
}

  }
  
  ngOnInit() {
    this.drawRoute();
  }

}
