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 + "° " + lm + "' " + ld + ""<br />Long: " + lgs + "° " + lgm + "' " + lgd + ""</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"> <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 + "° " + lm + "' " + ld + ""<br />Long: " + lgs + "° " + lgm + "' " + lgd + ""</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.