Wednesday, January 21, 2015

Autocomplete Location Search using Google API in .Net Jquery

The following code is implemented in Razor MVC:

1. _TestView.cshtml
<script src="https://maps.google.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
/*
Your JQuery Files
*/
<div>
/* Your View Code */
.
.
.
.
<input id="txtLocation" type="text" />
</div>



2. Jquery Code:
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
    var input = document.getElementById('textbox_Location');
    var autocomplete = new google.maps.places.Autocomplete(input);


    google.maps.event.addListener(autocomplete, 'place_changed', function () {

        var place = autocomplete.getPlace();
        if (typeof (place.address_components) !== 'undefined') {
            //Saved location
            var placeName = place.name;
            var completeAddress = place.formatted_address;
            var latValue = place.geometry.location.lat();
            var lonValue = place.geometry.location.lng();
        }      
        return false;
    });
}
 




No comments:

Post a Comment