GEO Location Track In Google Map With JavaScript

75037 views 7 years ago

Today, Laravelcode share with you how to track two starting and ending location point in google map with javascript. we are working on one transport related project in laravel and we are required this type starting and ending location point tracking in real time. we have done with javascript.

Google map API provide more API functionality for google map. this tutorials also base one one of the google map API. it related to location tracking.

We are write here some basic step for how to integrate location tracking in very simple way.

Step : 1 Create index.php file

First create one index.php file for show google map and then put into it following code.


<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <title>Location Track - Laravelcode</title>
    <style>
		#map {height: 100%;}
		html, body {
			height: 100%;
			margin: 0;
			padding: 0;
		}
		#floating-panel {
			position: absolute;
			top: 10px;
			right: 1%;
			z-index: 5;
			background-color: #fff;
			border: 1px solid #999;
			text-align: center;
		}
    </style>
</head>
<body>
    <div id="floating-panel">
    <b>Start1: </b>
    <input tye="text" id="start1" value="Mumbai"><!-- Starting Location -->
    <b>End1: </b>
    <input type="text" id="end1" value="Delhi"><!-- Ending Location -->
    </div>
    <div id="map"></div>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAP_API_KEY&callback=initMap&libraries=places,geometry"></script>
 </body>
</html>

After done this then copy following javascript code and also put into in after map div into script tag

[ADDCODE]


function calcDistance(p1, p2) {//p1 and p2 in the form of google.maps.LatLng object
	return (google.maps.geometry.spherical.computeDistanceBetween(p1, p2) / 1000).toFixed(3);//distance in KiloMeters
}

function getLocation() {
	if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(showPosition, showError);} 
	else {alert("Geolocation is not supported by this browser.");}
}
function showPosition(position) {
	alert("Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude); 
}
function showError(error) {
	switch(error.code) {
		case error.PERMISSION_DENIED:
			alert("User denied the request for Geolocation.");
			break;
		case error.POSITION_UNAVAILABLE:
			alert("Location information is unavailable.");
			break;
		case error.TIMEOUT:
			alert("The request to get user location timed out.");
			break;
		case error.UNKNOWN_ERROR:
			alert("An unknown error occurred.");
			break;
	}
}

function initMap() {
	
	var map = new google.maps.Map(document.getElementById('map'), {
		zoom: 10,
		center: { lat: 18.9965041, lng: 72.8194209 }
	});
	
	var waypts = [];//origin to destination via waypoints
	//waypts.push({location: 'indore', stopover: true});
	
	function continuouslyUpdatePosition(location){//Take current location from location.php and set marker to that location
		var xhttp = new XMLHttpRequest();
		xhttp.onreadystatechange = function() {
			if (this.readyState == 4 && this.status == 200) {
				var pos = JSON.parse(this.responseText);
				location.setPosition(new google.maps.LatLng(pos.lat,pos.lng));
				setTimeout(function(){
					continuouslyUpdatePosition(location);
				},5000);
			}
		};
		xhttp.open("GET", "location.php", true);
		xhttp.send();
	}
	
	/* Distance between p1 & p2
	var p1 = new google.maps.LatLng(45.463688, 9.18814);
	var p2 = new google.maps.LatLng(46.0438317, 9.75936230000002);
	alert(calcDistance(p1,p2)+" Kilimeters");
	*/
	
	//Make marker at any position in form of {lat,lng}
	function makeMarker(position /*, icon*/) {
		var marker = new google.maps.Marker({
			position: position,
			map: map,
			/*animation: google.maps.Animation.DROP,*/
			/*icon: icon,*/
		});
		return marker;
	}
	
	var icons = {
		end: new google.maps.MarkerImage('http://icons.iconarchive.com/icons/icons-land/vista-map-markers/32/Map-Marker-Push-Pin-1-Left-Pink-icon.png'),
		start: new google.maps.MarkerImage('http://icons.iconarchive.com/icons/icons-land/vista-map-markers/32/Map-Marker-Push-Pin-1-Left-Chartreuse-icon.png')
	};
	
	//Show suggestions for places, requires libraries=places in the google maps api script link
	var autocomplete1 = new google.maps.places.Autocomplete(document.getElementById('start1'));
	var autocomplete2 = new google.maps.places.Autocomplete(document.getElementById('end1'));
	
	var directionsService1 = new google.maps.DirectionsService;
	var directionsDisplay1 = new google.maps.DirectionsRenderer({
		polylineOptions: {strokeColor: "red"}, //path color
		//draggable: true,// change start, waypoints and destination by dragging
		/* Start and end marker with same image
		markerOptions : {icon: 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/32/Map-Marker-Push-Pin-1-Left-Pink-icon.png'},
		*/
		//suppressMarkers: true
	});
	directionsDisplay1.setMap(map);
	var onChangeHandler1 = function() {calculateAndDisplayRoute(directionsService1, directionsDisplay1, $('#start1'),$('#end1'));};
	$('#start1,#end1').change(onChangeHandler1);		
	
	function calculateAndDisplayRoute(directionsService, directionsDisplay, start, end) { 
		directionsService.route({
			origin: start.val(),
			destination: end.val(),
			waypoints: waypts,
			travelMode: 'DRIVING'
		}, function(response, status) {
			if (status === 'OK') {
				directionsDisplay.setDirections(response);
				var leg = response.routes[ 0 ].legs[ 0 ];
				// Move marker along path from A to B
				var markers = [];
				for(var i=0; i<leg.steps.length; i++){
					var marker = makeMarker(leg.steps[i].start_location);
					markers.push(marker);
					marker.setMap(null);
				}
				tracePath(markers, 0);
				
				var location = makeMarker(leg.steps[0].start_location);
				continuouslyUpdatePosition(location);
				
			} else {window.alert('Directions request failed due to ' + status);}
		});
	}
	
	function tracePath(markers, index){// move marker along path from A to B
		if(index==markers.length)	return;
		markers[index].setMap(map);
		setTimeout(function(){
			markers[index].setMap(null);
			tracePath(markers, index+1);
		},500);
	}
	
	calculateAndDisplayRoute(directionsService1, directionsDisplay1, $('#start1'),$('#end1'));
}

Step : 2 Create location.php file

Now, create one location.php file for get all dynamic location from database. we are show here static location but if you want get from database then you make it dynamic


$lat = 23.6838716;
$lng = 73.37194090000003;
echo '{"lat":"'.$lat.'", "lng":"'.$lng.'"}';

If you face any problem then please write a comment or give some suggestions for improvement. Thanks...

Laravel 8 Image Resize and Upload with Intervention Image

Uploading high size images in blog application is not good idea as it consumes more memory and space. Also it slows the webpage loading and ultimately affects on user experience. So it is always good...
How to make dependent dropdown list using jquery Ajax in PHP

Dynamic Category and Subcategory Dropdown in PHP MySQL Ajax. In this tutorial, we will show you how to engender categories and subcategories in PHP MySQL utilizing Ajax. Sometimes, you require to c...
How to integrate paypal payment gateway in laravel 5.4

Hello, today laravelcode share with you a one of the very nice tutorials of how to integrattion paypal payment gateway in your laravel to very easy way with simple example and with working code. Yo...
How to convert the first letter of a string to uppercase in PHP

Use the PHP ucfirst() function You can use the PHP ucfirst() function to change the first character of a string to uppercase (i.e. capital). Alternatively, you can use the ...
How to calculate the sum of values in an array in PHP

Use the PHP array_sum() function You can use the PHP array_sum() function to calculate the sum of all the numeric values in an array. Let's try out the following example...

LaravelCode

GEO Location Track In Google Map With JavaScript

Random Articles

Laravel 8 Image Resize and Upload with Intervention Image

Uploading high size images in blog application is not good idea as it consumes more memory and space. Also it slows the webpage loading and ultimately affects on user experience. So it is always good...

How to make dependent dropdown list using jquery Ajax in PHP

Dynamic Category and Subcategory Dropdown in PHP MySQL Ajax. In this tutorial, we will show you how to engender categories and subcategories in PHP MySQL utilizing Ajax. Sometimes, you require to c...

How to integrate paypal payment gateway in laravel 5.4

Hello, today laravelcode share with you a one of the very nice tutorials of how to integrattion paypal payment gateway in your laravel to very easy way with simple example and with working code. Yo...

How to convert the first letter of a string to uppercase in PHP

Use the PHP ucfirst() function You can use the PHP ucfirst() function to change the first character of a string to uppercase (i.e. capital). Alternatively, you can use the ...

How to calculate the sum of values in an array in PHP

Use the PHP array_sum() function You can use the PHP array_sum() function to calculate the sum of all the numeric values in an array. Let's try out the following example...

Advertise

GEO Location Track In Google Map With JavaScript

Random Articles

Laravel 8 Image Resize and Upload with Intervention Image

Uploading high size images in blog application is not good idea as it consumes more memory and space. Also it slows the webpage loading and ultimately affects on user experience. So it is always good...

How to make dependent dropdown list using jquery Ajax in PHP

Dynamic Category and Subcategory Dropdown in PHP MySQL Ajax. In this tutorial, we will show you how to engender categories and subcategories in PHP MySQL utilizing Ajax. Sometimes, you require to c...

How to integrate paypal payment gateway in laravel 5.4

Hello, today laravelcode share with you a one of the very nice tutorials of how to integrattion paypal payment gateway in your laravel to very easy way with simple example and with working code. Yo...

How to convert the first letter of a string to uppercase in PHP

Use the PHP&nbsp;ucfirst()&nbsp;function You can use the PHP&nbsp;ucfirst()&nbsp;function to change the first character of a string to uppercase (i.e. capital). Alternatively, you can use the&nbsp;...

How to calculate the sum of values in an array in PHP

Use the PHP&nbsp;array_sum()&nbsp;function You can use the PHP&nbsp;array_sum()&nbsp;function to calculate the sum of all the numeric values in an array. Let&#39;s try out the following example...

Advertise

Use the PHP ucfirst() function You can use the PHP ucfirst() function to change the first character of a string to uppercase (i.e. capital). Alternatively, you can use the ...

Use the PHP array_sum() function You can use the PHP array_sum() function to calculate the sum of all the numeric values in an array. Let's try out the following example...