Thursday, April 19, 2012

How to Geo code an address

We are going to convert an address into latitude and longitude coordinates. So we are doing geo coding with Google API.

Demo           Download

Here is the complete source code.

[sourcecode language="javascript"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="<a>http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="<a>Content-Type</a>" content="<a>text/html; charset=utf-8</a>" />
<title>Untitled Document</title>
<script src="<a>jquery-1.7.js</a>"></script>
<script src="<a href="view-source:http://maps.google.com/maps/api/js?sensor=false">http://maps.google.com/maps/api/js?sensor=false</a>"></script>
<script type="<a>text/javascript</a>">
$(document).ready(function () {

// wire up button click
$('#go').click(function () {
// get the address the user entered
var address = $('#address').val();
if (address) {
// use Google Maps API to geocode the address
// set up the Geocoder object
var geocoder = new google.maps.Geocoder();
// return the coordinates
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
// print results
printLatLong(results[0].geometry.location.lat(),
results[0].geometry.location.lng());
} else {
error('Google did not return any results.');
}

} else {
error("Reverse Geocoding failed due to: " + status);
}
});
}
else {
error('Please enter an address');
}
});

});

// output lat and long
function printLatLong(lat, long) {
$('body').append('<p>Lat: ' + lat + '</p>');
$('body').append('<p>Long: ' + long + '</p>');
}

function error(msg) {
alert(msg);
}

</script>
</head>

<body>
<div>
<label for="<a>address</a>">Enter an Address:</label>
<input type="<a>text</a>" id="<a>address</a>" />
</div>
<div>
<input type="<a>button</a>" id="<a>go</a>" value="<a>Find Latitude And Longitude</a>"/>
</div>

</body>
</html>
[/sourcecode]

No comments:

Post a Comment

How to enable CORS in Laravel 5

https://www.youtube.com/watch?v=PozYTvmgcVE 1. Add middleware php artisan make:middleware Cors return $next($request) ->header('Acces...