Hi nauna,
Refer below sample code.
HTML
Master Page
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<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 = document.getElementById(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>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Content Page
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script type="text/javascript">
window.onload = function () {
DrawMap('<%=TextBox2.ClientID%>');
}
</script>
<asp:TextBox ID="TextBox2" runat="server" Text="400093"></asp:TextBox>
<br />
<asp:LinkButton ID="LinkButton1" Text="Show Map" runat="server" />
<br />
<div id="dvMap" style="width: 300px; height: 400px">
</div>
</asp:Content>
Code
Default.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
// Uncomment if want to use TextBox change event.
//TextBox2.Attributes.Add("onchange", "DrawMap('" + TextBox2.ClientID + "');");
LinkButton1.OnClientClick = "DrawMap('" + TextBox2.ClientID + "');return false;";
}
Default.aspx.vb
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
'Uncomment if want to use TextBox change event.
'TextBox2.Attributes.Add("onchange", "DrawMap('" & TextBox2.ClientID & "');")
LinkButton1.OnClientClick = "DrawMap('" & TextBox2.ClientID & "');return false;"
End Sub
Screenshot
