Sunday, 31 July 2016

Validate Address or Place through google API

<html>
<head>
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&key=Your API Key"></script>
    <script type="text/javascript">
        google.maps.event.addDomListener(window, 'load', function () {
            var places = new google.maps.places.Autocomplete(document.getElementById('Address'));
            getLatLong(places);
           
        });

        function placeLastOfFocus()
        {
            // alert(1);
           
           
            // alert(places);
            //document.getElementById('Address').value
            //!a.trim()
            if (!document.getElementById('Address').value.trim()) {
               
                $("#Address1").val('');
                $("#latitude").val('');
                $("#longitude").val('');
                return;
            }
            //doGeocode();
            var places = new google.maps.places.Autocomplete(document.getElementById('Address'));
            getLatLong(places);
        }
        function doGeocode() {
            var addr = document.getElementById("Address");
            // Get geocoder instance
            var geocoder = new google.maps.Geocoder();

            // Geocode the address
            geocoder.geocode({ 'address': addr.value }, function (results, status) {
                if (status === google.maps.GeocoderStatus.OK && results.length > 0) {

                    // set it ot he correct, formatted address if it's vadlid
                    addr.value = results[0].formatted_address;;
                    alert("valid");
                    // show an error if it's not
                } else alert("Invalid address");
            });
        };
        function getLatLong(places)
        {
            google.maps.event.addListener(places, 'place_changed', function () {
                $("#Address").val('');
                $("#latitude").val('');
                $("#longitude").val('');
                //alert(1);
                var place = places.getPlace();
                var address = place.formatted_address;
                var latitude = place.geometry.location.lat();
                var longitude = place.geometry.location.lng();
                //var city = place.geometry.location.city();
                //alert(address);
                //for testing purpose alert
                var mesg = "Address: " + address;
                mesg += "\nLatitude: " + latitude;
                mesg += "\nLongitude: " + longitude;
                //alert(mesg);
                $("#Address1").val(address);
                $("#latitude").val(latitude);
                $("#longitude").val(longitude);
            });
        }
    </script>
</head>
<body>                                          
 <textarea name="Address" id="Address" autocomplete="on" class="col-lg-offset-5" ></textarea>
    <input type="text" name="latitude" id="latitude" autocomplete="on" />
    <input type="text" name="longitude" id="longitude" autocomplete="on" />
</body>
</html>

No comments:

Post a Comment