Google Maps API: Populate Google Maps on TextBox Change event using JavaScript

Last Reply 5 months ago By pandeyism

Posted 5 months ago

hello 

i am using this script but it is not firing on textbox change event please advice

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&key=AIzaSyBE1J5Pe_GZXBR_x9TXOv6TU5vtCSmEPW4"></script>
    <script type="text/javascript">
        function DrawMap() {
            var geocoder = new google.maps.Geocoder();
            var address = document.getElementById('<%= TextBox2.ClientID %>').value);
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[0].types[0] == 'postal_code') {
                        var latitude = results[0].geometry.location.lat();
                        var longitude = results[0].geometry.location.lng();
                        var data = {};
                        data.title = results[0].formatted_address;
                        data.lat = latitude;
                        data.lng = longitude;
                        var mapOptions = { center: new google.maps.LatLng(latitude, longitude), zoom: 18, mapTypeId: google.maps.MapTypeId.ROADMAP };
                        var infoWindow = new google.maps.InfoWindow();
                        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
                        var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                        var marker = new google.maps.Marker({ position: myLatlng, map: map, title: data.title });
                        (function (marker, data) {
                            google.maps.event.addListener(marker, "click", function (e) {
                                infoWindow.setContent("<div style = 'width:200px;height:50px'>" + data.title + "</div>");
                                infoWindow.open(map, marker);
                            });
                        })(marker, data);
                        document.getElementById("dvMap").style.display = "block";
                    } else {
                        document.getElementById("dvMap").style.display = "none";
                        alert("Your post code is not correct.\nPlease update your correct postcode.");
                    }
                } else {
                    document.getElementById("dvMap").style.display = "none";
                    alert("Your post code is not correct.\nPlease update your correct postcode.");
                }
            });
        };
    </script>
    <asp:TextBox ID="TextBox2" runat="server" onchange="DrawMap(this)"></asp:TextBox>

 

You are viewing reply posted by: pandeyism 5 months ago.
Posted 5 months ago

Hey nauna,

Please refer below sample.

HTML

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=API_KEY"></script>
<script type="text/javascript">
    function DrawMap(ele) {
        var geocoder = new google.maps.Geocoder();
        var address = ele.value;
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[0].types[0] == 'postal_code') {
                    var latitude = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();
                    var data = {};
                    data.title = results[0].formatted_address;
                    data.lat = latitude;
                    data.lng = longitude;
                    var mapOptions = { center: new google.maps.LatLng(latitude, longitude), zoom: 18, mapTypeId: google.maps.MapTypeId.ROADMAP };
                    var infoWindow = new google.maps.InfoWindow();
                    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
                    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                    var marker = new google.maps.Marker({ position: myLatlng, map: map, title: data.title });
                    (function (marker, data) {
                        google.maps.event.addListener(marker, "click", function (e) {
                            infoWindow.setContent("<div style = 'width:200px;height:50px'>" + data.title + "</div>");
                            infoWindow.open(map, marker);
                        });
                    })(marker, data);
                    document.getElementById("dvMap").style.display = "block";
                } else {
                    document.getElementById("dvMap").style.display = "none";
                    alert("Your post code is not correct.\nPlease update your correct postcode.");
                }
            } else {
                document.getElementById("dvMap").style.display = "none";
                alert("Your post code is not correct.\nPlease update your correct postcode.");
            }
        });
    };
</script>
<div>
    <asp:TextBox ID="TextBox2" runat="server" onchange="DrawMap(this)"></asp:TextBox>
    <br />
    <br />
    <div id="dvMap" style="width: 300px; height: 400px">
    </div>
</div>

Screenshot