<div class="main-content">
          <div class="content-wrapper">
            <div class="container-fluid"><!-- Basic form layout section start -->
<section id="basic-form-layouts">
	<!--<div class="row">
		<div class="col-sm-12">
			<h2 class="content-header">Driver Master</h2>
		</div>
	</div>-->
	<div class="row">
		<div class="col-md-12">
			<div class="card">
				<div class="card-header">
					<div class="page-title-wrap">
						<h4 class="card-title">Track Driver</h4>
					</div>
					
					
					<!--<p class="mb-0">This is the most basic and cost estimation form is the default position.</p>-->
				</div>
				<div class="card-body">
					<div class="px-3">
						<form class="form custom_form_style">
							<div class="form-body">
									
								<div class="row">
								<div class="col-sm-12">
									<div class="track_driver_map">
                    <!--<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d471218.38560188503!2d88.04952746944413!3d22.676385755547646!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39f882db4908f667%3A0x43e330e68f6c2cbc!2sKolkata%2C+West+Bengal!5e0!3m2!1sen!2sin!4v1566209133726!5m2!1sen!2sin" frameborder="0" style="border:0" allowfullscreen></iframe> -->
                     <!-- <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAoGn4mi9w34SGpAplKcE9i2cILWCpY5ss&callback"></script>-->
                   <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDUzZdi2LgA2zI5o2bBSqJvuV-bEEkfZpU&libraries=geometry"></script>
                    <div id="traker_map" style="height: 500px;"></div>
									</div>
								</div>
									
								</div>
								
								
								
								
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>

		
	</div>
</section>
<!-- // Basic form layout section end -->
    </div>
  </div>
</div>
<script>
      /*var map;
      function initMap() {
        map = new google.maps.Map(
            document.getElementById('map'),
            {center: new google.maps.LatLng(-33.91722, 151.23064), zoom: 16});

        var iconBase =
            'https://developers.google.com/maps/documentation/javascript/examples/full/images/';

        var icons = {
          parking: {
            icon: iconBase + 'parking_lot_maps.png'
          },
          library: {
            icon: iconBase + 'library_maps.png'
          },
          info: {
            icon: iconBase + 'info-i_maps.png'
          }
        };

        var features = [
          {
            position: new google.maps.LatLng(-33.91721, 151.22630),
            type: 'info'
          }, {
            position: new google.maps.LatLng(-33.91539, 151.22820),
            type: 'info'
          }, {
            position: new google.maps.LatLng(-33.91747, 151.22912),
            type: 'info'
          }, {
            position: new google.maps.LatLng(-33.91910, 151.22907),
            type: 'info'
          }, {
            position: new google.maps.LatLng(-33.91725, 151.23011),
            type: 'info'
          }, {
            position: new google.maps.LatLng(-33.91872, 151.23089),
            type: 'info'
          }, {
            position: new google.maps.LatLng(-33.91784, 151.23094),
            type: 'info'
          }, {
            position: new google.maps.LatLng(-33.91682, 151.23149),
            type: 'info'
          }, {
            position: new google.maps.LatLng(-33.91790, 151.23463),
            type: 'info'
          }, {
            position: new google.maps.LatLng(-33.91666, 151.23468),
            type: 'info'
          }, {
            position: new google.maps.LatLng(-33.916988, 151.233640),
            type: 'info'
          }, {
            position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775),
            type: 'parking'
          }, {
            position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496),
            type: 'parking'
          }, {
            position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587),
            type: 'parking'
          }, {
            position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267),
            type: 'parking'
          }, {
            position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644),
            type: 'parking'
          }, {
            position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569),
            type: 'parking'
          }, {
            position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781),
            type: 'parking'
          }, {
            position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578),
            type: 'library'
          }
        ];

        // Create markers.
        for (var i = 0; i < features.length; i++) {
          var marker = new google.maps.Marker({
            position: features[i].position,
            icon: icons[features[i].type].icon,
            map: map
          });
        };
      }*/
    </script>
    <!--<script async defer
    //src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyAoGn4mi9w34SGpAplKcE9i2cILWCpY5ss&callback=initMap">
    </script>-->
<script>

$(document).ready(function(){
  var json = JSON.parse('{"lat":"-37.020100","lon":"144.964600","ele":"195.9"}'); // replace with current location
  var Center = new google.maps.LatLng(json.lat, json.lon);
  var map;
  var locations = new Array();
  $.ajax({
      type: "POST",
      url: '<?php echo base_url('admin/Track_driver/getTrakerdata')?>',
      data:{},
      dataType:'json',
      success: function(response){
        //alert(response);
          
          var map = new google.maps.Map(document.getElementById('traker_map'), {
            zoom: 7,
            center: Center,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          });
          setMarkers(map,response);
          
      },
      error:function(response){
        alert("error");
      }
  });
})
function setMarkers(map,location){
    var infowindow = new google.maps.InfoWindow()
    var marker, i;
    for (i = 0; i < location.length; i++)
    {  
      
      marker = new google.maps.Marker({  
          position: new google.maps.LatLng(location[i].last_lat, location[i].last_lon),
          map: map, title: location[i].registration_no , icon: '<?php echo base_url('public/images/car_ico.png')?>'
      });
     
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent("Car No.: " + location[i].registration_no +  "<br/>" + "Last shift: " + location[i].shift_no +"<br/>"+"Driver name: " + location[i].fullname +"<br/>"+ "Dc No.: " + location[i].dc_no+"<br/>"+ "Last Updated: " + location[i].last_updated );
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
}
</script>