Force user to select Address from Google Map API Autocomplete result on TextBox Blur in jQuery

Last Reply 8 months ago By pandeyism

Posted 8 months ago


Force user to select Address from Google Map API Autocomplete result in jQuery 

i am using this snippet its working fine, instead of validating on button click even i want to validate it on texbox blur event

Posted 8 months ago

Hi nauna,

Refer below sample.


<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
    var isPlaceChanged = false;
    google.maps.event.addDomListener(window, 'load', function () {
        var places = new google.maps.places.Autocomplete(document.getElementById('txtPlaces'));
        google.maps.event.addListener(places, 'place_changed', function () {
            isPlaceChanged = true;
            var geocoder = new google.maps.Geocoder();
            var place = places.getPlace();
            var address = place.formatted_address;
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var latitude = results[0];
                    var longitude = results[0].geometry.location.lng();
                    var mapOptions = { center: new google.maps.LatLng(latitude, longitude), zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP };
                    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
                    var marker = new google.maps.Marker({ position: new google.maps.LatLng(latitude, longitude), map: map });

                } else {
                    alert("Request failed.")

        $("#txtPlaces").blur(function () {
            if (!isPlaceChanged) {
            else {
                alert("Please Enter valid location");
<input type="text" id="txtPlaces" style="width: 250px" placeholder="Enter a location" />
<asp:requiredfieldvalidator id="valName" controltovalidate="txtPlaces" runat="server"
    errormessage="*Please Enter valid location" forecolor="Red" />
<div id="dvMap">