File: /var/www/html/taxicamera/applicationold/views/admin/track_driver/track_driver.php
<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>