Skip to content

Instantly share code, notes, and snippets.

@imparvez

imparvez/google-map-tracker.html

Created June 14, 2018 06:39
Show Gist options
  • Save imparvez/efdba41db6c27e19dd95e0c60305fff6 to your computer and use it in GitHub Desktop.
Save imparvez/efdba41db6c27e19dd95e0c60305fff6 to your computer and use it in GitHub Desktop.
Download ZIP
Google Map With tracker from origin and destination.
Raw
google-map-tracker.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Google Maps</title>
<style>
#map {
height: 500px;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<ul id="instructions"></ul>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA4SQ-HjuhSQmjzhbCQoInGXpwXKFiAjw0&callback=initMap">
</script>
<script src="https://rawgit.com/HPNeo/gmaps/master/gmaps.js"></script>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
function onSuccess(position) {
// var element = document.getElementById('geolocation');
// element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
// 'Longitude: ' + position.coords.longitude + '<br />' +
// 'Altitude: ' + position.coords.altitude + '<br />' +
// 'Accuracy: ' + position.coords.accuracy + '<br />' +
// 'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br />' +
// 'Heading: ' + position.coords.heading + '<br />' +
// 'Speed: ' + position.coords.speed + '<br />' +
// 'Timestamp: ' + position.timestamp + '<br />';
var map;
$(document).ready(function () {
map = new GMaps({
el: '#map',
lat: position.coords.latitude,
lng: position.coords.longitude,
zoom: 15,
panControl: false,
streetViewControl: false,
mapTypeControl: false,
overviewMapControl: false
});
map.travelRoute({
origin: [position.coords.latitude, position.coords.longitude],
destination: [19.1551, 72.8679],
travelMode: 'driving',
step: function (e) {
$('#instructions').append('<li>' + e.instructions + '</li>');
$('#instructions li:eq(' + e.step_number + ')').delay(450 * e.step_number).fadeIn(200, function () {
map.drawPolyline({
path: e.path,
strokeColor: '#131540',
strokeOpacity: 0.6,
strokeWeight: 6
});
});
}
});
});
}
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
navigator.geolocation.getCurrentPosition(onSuccess, onError);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment