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]
Subscribe to:
Post Comments (Atom)
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...
-
< Requirements Java Development Kit (JDK) NetBeans IDE Apache Axis 2 Apache Tomcat Server Main Topics Setup Development Environ...
-
Download Sourcecode [sourcecode language="csharp"] using System; using System.Collections.Generic; using System.Linq; using System...
No comments:
Post a Comment