This code will calculate the latitude and longitude of the place in background on entering the place name.
For integration of Google map to calculate Latitude and Longitude major script is :
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
To make the autocomplete of the address create a object of the class:
google.maps.places.Autocomplete
Here is the complete code to get the exact location latitude and longitude using Google map.
Hope it may help you somewhere.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script type="text/javascript">
function initialize() {
var address = (document.getElementById('my_address'));
var autocomplete = new google.maps.places.Autocomplete(address);
autocomplete.setTypes(['geocode']);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
});
}
function getLatLng() {
geocoder = new google.maps.Geocoder();
var address = document.getElementById("my_address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
alert(latitude);
var longitude = results[0].geometry.location.lng();
alert(longitude);
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<input type="text" id="my_address">
<button id="getCords" onClick="getLatLng();">getDetail</button>
</body>
</html>
0 Comment(s)