How to Geocode an Address or Zip Code using Google Maps API v3? - JavaScript Example
Get Latitude and Longitude from Zip Code - Google Maps API
In the previous article I explained about Geocoding and Reverse Geocoding? - Google Maps API. Here I will show you how to Geocode a Location using Google Maps API - v3. Find the source code below:
How to Geocode an Address in Google Maps Javascript Code
Default.aspx
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>How to Geocode an Address or Zip Code using Google Maps API v3</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="geocode.js"></script>
<link rel="stylesheet" type="text/css" href="map.css" />
</head>
<body>
<div id="store-locator-container">
<div id="page-header">
<h1>
Geocode a Location or
Zip Code </h1>
</div>
<div id="form-container">
<form id="user-location" method="post" action="#">
<div id="form-input">
<label for="address">
Enter Address or
Zip Code:</label>
<input type="text" id="address"
name="address"
/>
</div>
<button id="submit" type="submit">
Submit</button>
</form>
</div>
<div id="geocode-result">
</div>
</div>
</body>
</html>
geocode.js
//Geocode function for the origin location
function GoogleGeocode() {
geocoder = new google.maps.Geocoder();
this.geocode
= function(address, callbackFunction) {
geocoder.geocode( { 'address': address}, function(results,
status) {
if
(status == google.maps.GeocoderStatus.OK) {
var
result = {};
result.latitude =
results[0].geometry.location.lat();
result.longitude =
results[0].geometry.location.lng();
callbackFunction(result);
} else
{
alert("Geocode
was not successful for the following reason: " + status);
callbackFunction(null);
}
});
};
}
//Process form input
$(function() {
$('#user-location').on('submit', function(e){
//Stop
the form submission
e.preventDefault();
//Get
the user input and use it
var
userinput = $('form #address').val();
if
(userinput == "")
{
alert("The input box was blank.");
}
var
g = new GoogleGeocode();
var
address = userinput;
g.geocode(address, function(data) {
if(data
!= null) {
olat = data.latitude;
olng = data.longitude;
$('#geocode-result').append("Latitude: " + olat + "<br />" + "Longitude: " + olng + "<br
/><br />");
} else
{
//Unable
to geocode
alert('ERROR! Unable to geocode address');
}
});
});
});
Download the source code click here ..
Please leave your comments, suggestions and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading .. :)
How to Geocode an Address or Zip Code using Google Maps API v3? - JavaScript Example
Reviewed by Ravi Kumar
on
12:14 PM
Rating:
Reviewed by Ravi Kumar
on
12:14 PM
Rating:
No comments: