Add Google Map in your website with dynamic address

Karthikreddy
Posted by Karthikreddy under ASP.NET category on | Points: 40 | Views : 2245
1.Default.aspx

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>


<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(17.3667, 78.4667);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("canvas_maps"), mapOptions);
}
function codeAddress() {
var address = document.getElementById('<%= codeAddress.ClientID %>').value;
//alert(address);
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
//alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent" >
<asp:TextBox ID="codeAddress" runat="server"></asp:TextBox>
<br />
<body>
<div id="canvas_maps" style="width: 900px; height: 500px;"></div>
</body>
</asp:Content>


2. Default.aspx.cs(code Behind)


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(GetType(), "show", "initialize();", true);
ClientScript.RegisterStartupScript(GetType(), "show1", "codeAddress();", true);

}
}

Comments or Responses

Login to post response