Breaking News

LightBlog

Thursday, 21 April 2016

Google Maps API : Get Location (Latitude and Longitude) from Zip Code (Pin Code) using JavaScript

Above Here I will explain how to  Get Location (Latitude and Longitude) from Zip Code (Pin Code) using JavaScript  or Google Map get location latitude and longitude using Google API in JavaScript example. we can get current location latitude and longitude using Google Map.

In this article I will explain with an example, how to get Location Coordinates i.e. Latitude and Longitude from Zip Code (Pin Code) by making use of Google Maps API V3 (Version 3) and JavaScript.


 <div id="form-input">
 <label for="address" style="margin: 0 0 0 10px;">
  Enter Address or Zip Code:</label>
 <input type="text" id="address" name="address" />
 <button id="submit" type="submit"> Submit</button>
 </div>
<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" />
    <style type="text/css">
     html { height: 100% }
     body { height: 100%; margin: 0; padding: 0 }
     #map_canvas { height: 100% }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
$(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 />");

                document.getElementById('output').value = olat;
                document.getElementById('Text1').value = olng;
            } else {
                //Unable to geocode
                alert('ERROR! Unable to geocode address');
            }
        });

    });
});