How to Geocode an Address or Zip Code using Google Maps API v3? - JavaScript Example

random

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



How to Geocode an Address in Google Maps Javascript Code


Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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: 5

No comments:

All Rights Reserved by Etechpulse © 2012 - 2017

Contact Form

Name

Email *

Message *

Powered by Blogger.