TrinityTuts

Find your Latitude and Longitude on Google map

Last updated on August 13th, 2015 at 12:32 am

Google maps display location or area according to their Geo coordinates (Latitude and Longitude). There are several method to get coordinates of location. In this post i will explain you how to create a simple application to get coordinates of location using google map.

Find Latitude and Longitude

This is a simple app use google map to find latitude and longitude of area. You need to drag pin to place you want to get position.

Code

<html>
<head>
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">
	//<![CDATA[

	var map = null;
	var latsgn = 1;
	var lgsgn = 1;
	var marker = null;
	var posset = 0;
	var mrks = {mvcMarkers: new google.maps.MVCArray()};
	var iw;
	var drag=false;

	function Gmap() {
	ll = new google.maps.LatLng(20.0, -10.0);
	zoom=2;
	var mO = {
	scaleControl:true,
	zoom:zoom,
	zoomControl:true,
	zoomControlOptions: {style:google.maps.ZoomControlStyle.LARGE},
	center: ll,
	disableDoubleClickZoom:true,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	map = new google.maps.Map(document.getElementById("map"), mO);
	map.setTilt(0);
	map.panTo(ll);
	marker = new google.maps.Marker({position:ll,map:map,draggable:true,title:'Drag this pin and place you want!.'});   

	google.maps.event.addListener(marker, 'click', function(mll) {
	var html= "<div style='color:#000;background-color:#fff;padding:5px;width:150px;'><p>Latitude - Longitude:<br />" + String(mll.latLng.toUrlValue()) + "<br /></p></div>";
	iw = new google.maps.InfoWindow({content:html});
	iw.open(map,marker);
	});
	google.maps.event.addListener(marker, 'dragstart', function() {if (iw){iw.close();}});

	google.maps.event.addListener(marker, 'dragend', function(event) {
	posset = 1;

	if (map.getZoom() < 10){map.setZoom(15);}
	map.setCenter(event.latLng);
	computepos(event.latLng);
	drag=true;
	setTimeout(function(){drag=false;},250);
	});

	google.maps.event.addListener(map, 'click', function(event) {
	if (drag){return;}
	posset = 1;
	popInfo(event.latLng) ;
	if (map.getZoom() < 10){map.setZoom(10);}
	map.panTo(event.latLng);
	computepos(event.latLng);
	});

	}

	function computepos (point)
	{
	var latA = Math.abs(Math.round(point.lat() * 1000000.));
	var lonA = Math.abs(Math.round(point.lng() * 1000000.));
	if(point.lat() < 0)
		{
			var ls = '-' + Math.floor((latA / 1000000)).toString();
		}
		else
		{
			var ls = Math.floor((latA / 1000000)).toString();
		}
		var lm = Math.floor(((latA/1000000) - Math.floor(latA/1000000)) * 60).toString();
		var ld = ( Math.floor(((((latA/1000000) - Math.floor(latA/1000000)) * 60) - Math.floor(((latA/1000000) - Math.floor(latA/1000000)) * 60)) * 100000) *60/100000 ).toString();
		if(point.lng() < 0)
		{
		  var lgs = '-' + Math.floor((lonA / 1000000)).toString();
		}
		else
		{
			var lgs = Math.floor((lonA / 1000000)).toString();
		}
		var lgm = Math.floor(((lonA/1000000) - Math.floor(lonA/1000000)) * 60).toString();
		var lgd = ( Math.floor(((((lonA/1000000) - Math.floor(lonA/1000000)) * 60) - Math.floor(((lonA/1000000) - Math.floor(lonA/1000000)) * 60)) * 100000) *60/100000 ).toString();
		document.getElementById("latbox").value=point.lat().toFixed(6);
		document.getElementById("lonbox").value=point.lng().toFixed(6);
	}

	// Display box over pin and show Latitude and Longitude info
	function popInfo(point)
	{
	var html= "<div style='color:#000;background-color:#fff;padding:3px;width:150px;'><p>Latitude - Longitude:<br />" + String(point.toUrlValue()) + "<br /></p></div>";
	var iw = new google.maps.InfoWindow({content:html});
	var marker = new google.maps.Marker({position:point,map:map,icon:'/i/blue-dot.png',draggable:true});
	mrks.mvcMarkers.push(marker);
	google.maps.event.addListener(marker, 'click', function(event) {
	var html= "<div style='color:#000;background-color:#fff;padding:3px;width:150px;'><p>Latitude - Longitude:<br />" + String(event.latLng.toUrlValue()) + "<br /><br />Lat: " + ls +  "&#176; " + lm +  "&#39; "  + ld + "&#34;<br />Long: " + lgs +  "&#176; " + lgm +  "&#39; " + lgd + "&#34;</p></div>";
	var iw = new google.maps.InfoWindow({content:html});
	iw.open(map,marker);
	computepos(event.latLng);
	});
	}

	// Clear form value
	function reset() {
	mrks.mvcMarkers.forEach(function(elem, index) {elem.setMap(null);});
	mrks.mvcMarkers.clear();
	document.getElementById("latbox").value='';
	document.getElementById("lonbox").value='';
	marker.setPosition(map.getCenter());
	}


	function pincenter() {
	marker.setPosition(map.getCenter());
	computepos (map.getCenter());
	}

	//]]>
	</script>	
</head>
<body onload="Gmap()">
<div id="content">
	<div id="map" style="width: 100%; height: 450px"></div>
<input type="button" value="Clear / Reset" id="reset" onclick="reset()" class="btn btn-primary">&nbsp;&nbsp;<input type="button" value="Center Red Marker" id="reset1" onclick="pincenter()" class="btn btn-success">
</div>
</body>
</html>

To find location coordinates we are using google map and write some javascript function to calculate location.

function Gmap() {
	ll = new google.maps.LatLng(20.0, -10.0);
	zoom=2;
	var mO = {
	scaleControl:true,
	zoom:zoom,
	zoomControl:true,
	zoomControlOptions: {style:google.maps.ZoomControlStyle.LARGE},
	center: ll,
	disableDoubleClickZoom:true,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	map = new google.maps.Map(document.getElementById("map"), mO);
	map.setTilt(0);
	map.panTo(ll);
	marker = new google.maps.Marker({position:ll,map:map,draggable:true,title:'Drag this pin and place you want!.'});   

	google.maps.event.addListener(marker, 'click', function(mll) {
	var html= "<div style='color:#000;background-color:#fff;padding:5px;width:150px;'><p>Latitude - Longitude:<br />" + String(mll.latLng.toUrlValue()) + "<br /></p></div>";
	iw = new google.maps.InfoWindow({content:html});
	iw.open(map,marker);
	});
	google.maps.event.addListener(marker, 'dragstart', function() {if (iw){iw.close();}});

	google.maps.event.addListener(marker, 'dragend', function(event) {
	posset = 1;

	if (map.getZoom() < 10){map.setZoom(15);}
	map.setCenter(event.latLng);
	computepos(event.latLng);
	drag=true;
	setTimeout(function(){drag=false;},250);
	});

	google.maps.event.addListener(map, 'click', function(event) {
	if (drag){return;}
	posset = 1;
	popInfo(event.latLng) ;
	if (map.getZoom() < 10){map.setZoom(10);}
	map.panTo(event.latLng);
	computepos(event.latLng);
	});

	}

In above function we load google map and make pin draggable through which can move and place pin anywhere over map and get coordinates.

function computepos (point)
	{
	var latA = Math.abs(Math.round(point.lat() * 1000000.));
	var lonA = Math.abs(Math.round(point.lng() * 1000000.));
	if(point.lat() < 0)
		{
			var ls = '-' + Math.floor((latA / 1000000)).toString();
		}
		else
		{
			var ls = Math.floor((latA / 1000000)).toString();
		}
		var lm = Math.floor(((latA/1000000) - Math.floor(latA/1000000)) * 60).toString();
		var ld = ( Math.floor(((((latA/1000000) - Math.floor(latA/1000000)) * 60) - Math.floor(((latA/1000000) - Math.floor(latA/1000000)) * 60)) * 100000) *60/100000 ).toString();
		if(point.lng() < 0)
		{
		  var lgs = '-' + Math.floor((lonA / 1000000)).toString();
		}
		else
		{
			var lgs = Math.floor((lonA / 1000000)).toString();
		}
		var lgm = Math.floor(((lonA/1000000) - Math.floor(lonA/1000000)) * 60).toString();
		var lgd = ( Math.floor(((((lonA/1000000) - Math.floor(lonA/1000000)) * 60) - Math.floor(((lonA/1000000) - Math.floor(lonA/1000000)) * 60)) * 100000) *60/100000 ).toString();
		document.getElementById("latbox").value=point.lat().toFixed(6);
		document.getElementById("lonbox").value=point.lng().toFixed(6);
	}

In above function we perform some mathematical operation to get accurate coordinates and display latitude and longitude result inside text fields.

function popInfo(point)
	{
	var html= "<div style='color:#000;background-color:#fff;padding:3px;width:150px;'><p>Latitude - Longitude:<br />" + String(point.toUrlValue()) + "<br /></p></div>";
	var iw = new google.maps.InfoWindow({content:html});
	var marker = new google.maps.Marker({position:point,map:map,icon:'/i/blue-dot.png',draggable:true});
	mrks.mvcMarkers.push(marker);
	google.maps.event.addListener(marker, 'click', function(event) {
	var html= "<div style='color:#000;background-color:#fff;padding:3px;width:150px;'><p>Latitude - Longitude:<br />" + String(event.latLng.toUrlValue()) + "<br /><br />Lat: " + ls +  "&#176; " + lm +  "&#39; "  + ld + "&#34;<br />Long: " + lgs +  "&#176; " + lgm +  "&#39; " + lgd + "&#34;</p></div>";
	var iw = new google.maps.InfoWindow({content:html});
	iw.open(map,marker);
	computepos(event.latLng);
	});
	}

This function is used to display a popup when you click over pin popup is appear to display you latitude and longitude.

function reset() {
	mrks.mvcMarkers.forEach(function(elem, index) {elem.setMap(null);});
	mrks.mvcMarkers.clear();
	document.getElementById("latbox").value='';
	document.getElementById("lonbox").value='';
	marker.setPosition(map.getCenter());
	}

This function help clear input fields value which are used to display latitude and longitude position.

Thankyou.