Hi ahmadsubuhanl...,
Check this example. Now please take its reference and correct your code.
HTML
<asp:TextBox ID="txtLocation" runat="server" />
<asp:Button ID="btnShow" Text="Show Map" runat="server" />
<hr />
<div id="dvMap" style="width: 300px; height: 300px"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&key=API_KEY"></script>
<script type="text/javascript">
$(function () {
$('[id*=btnShow]').on('click', function () {
var map = new google.maps.Map(document.getElementById("dvMap"));
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': $('[id*=txtLocation]').val() }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var Latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
var marker = new google.maps.Marker({
position: Latlng,
map: map,
title: results[0].formatted_address
});
latlngbounds.extend(marker.position);
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(marker.title);
infoWindow.open(map, marker);
});
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
} else {
alert("Request failed.")
}
});
return false;
});
});
</script>
Screenshot
