ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved. Google Maps API: Populate Google Maps on TextBox Change event using JavaScript<p>Hey <a class="username" rel="nauna"> nauna</a>,</p> <p>Please refer below sample.</p> <p><span style="text-decoration: underline;"><strong>HTML</strong></span></p> <pre class="brush: html">&lt;script type=&#34;text/javascript&#34; src=&#34;https://maps.googleapis.com/maps/api/js?libraries=places&amp;key=API_KEY&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; function DrawMap(ele) { var geocoder = new google.maps.Geocoder(); var address = ele.value; geocoder.geocode({ &#39;address&#39;: address }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[0].types[0] == &#39;postal_code&#39;) { 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(&#34;dvMap&#34;), 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, &#34;click&#34;, function (e) { infoWindow.setContent(&#34;&lt;div style = &#39;width:200px;height:50px&#39;&gt;&#34; + data.title + &#34;&lt;/div&gt;&#34;); infoWindow.open(map, marker); }); })(marker, data); document.getElementById(&#34;dvMap&#34;).style.display = &#34;block&#34;; } else { document.getElementById(&#34;dvMap&#34;).style.display = &#34;none&#34;; alert(&#34;Your post code is not correct.\nPlease update your correct postcode.&#34;); } } else { document.getElementById(&#34;dvMap&#34;).style.display = &#34;none&#34;; alert(&#34;Your post code is not correct.\nPlease update your correct postcode.&#34;); } }); }; &lt;/script&gt; &lt;div&gt; &lt;asp:TextBox ID=&#34;TextBox2&#34; runat=&#34;server&#34; onchange=&#34;DrawMap(this)&#34;&gt;&lt;/asp:TextBox&gt; &lt;br /&gt; &lt;br /&gt; &lt;div id=&#34;dvMap&#34; style=&#34;width: 300px; height: 400px&#34;&gt; &lt;/div&gt; &lt;/div&gt;</pre> <p><span style="text-decoration: underline;"><strong>Screenshot</strong></span></p> <p><img src="https://i.imgur.com/t0wu7IC.gif" alt="" width="333" height="516" /></p>https://www.aspforums.net:443/Threads/113148/Google-Maps-API-Populate-Google-Maps-on-TextBox-Change-event-using-JavaScript/https://www.aspforums.net:443/Threads/113148/Google-Maps-API-Populate-Google-Maps-on-TextBox-Change-event-using-JavaScript/Thu, 03 Jan 2019 23:17:28 GMT