Get Google Maps Api Key for Website

Introduction:

Here I will explain how to generate Google map api key for website or create Google maps api key for localhost website or get Google maps api key for website .

Description:

If we want to use Google maps in website first we need to get api key from Google for that you need to follow below steps

First open the APIs Console page at https://code.google.com/apis/console and log in with your Google Account. Whenever you open above url it will show like as shown below

Now click on Create project once login click on the Services link from the left-hand menu.

Once open Services tab check for Google Maps API v3 and click on “off” to activate that service in the next screen select conditions and click “Accept” button.

Now Click on API Access link from the left-hand menu. Once if it opens Your API key is available from the API Access page, in the Simple API Access section. In that Maps API applications click on Create new Browser key button >> in next window give url of your application and click Create

Once we got the key Simple API Access section will show data like as shown below

This way we can generate Google MAP API key to use this key to integrate in websites.

Advertisements

How to add google map to your website.

Marker

To add the Google map on your asp.net web page. Simply paste the code given below.

<script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyBVaXuUwG51lC0vu6q-E-PzaCGI_u6UX1A&sensor=false&#8221;
type=”text/javascript”></script>
<script type=”text/javascript”>

function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(“map_canvas”));
map.setCenter(new GLatLng(51.659369, -0.029843), 15);
map.setUIToDefault();
marker = new GMarker(new GLatLng(51.659369, -0.029843));
map.addOverlay(marker);
}

}

</script>

Insert a div named “map_canvas” where you want to put map on your page.

<div id=”map_canvas” style=”width: 300px; height: 350px”></div>

For showing any address just pass the longitude and latitude values for your address and replace:
map.setCenter(new GLatLng(51.659369, -0.029843), 15);

Get longitute and latitute from address for google map

Note: you also need to change the Key for your project. You can generate new key from: https://code.google.com/apis/console/

Get Google Map API Key for website

Unable to upload large files in ASP .Net

The problem

By default, Machine.config is configured to accept HTTP Requests upto 4096 KB (4 MB) and it is reflected in all your ASP.NET applications. You can change the Machine.config file directly, or you can change only the Web.config file of the application(s) you want to.

The solution

Open your Web.config file, and just below the <system.web> tag, add the following tag:

<httpRuntime 
executionTimeout="90" 
maxRequestLength="4096" 
useFullyQualifiedRedirectUrl="false" 
minFreeThreads="8" 
minLocalRequestFreeThreads="4" 
appRequestQueueLimit="100" 
enableVersionHeader="true"
/>

Now, just take a look at the maxRequestLength="4096" attribute of the <httpRuntime> tag. As you may have realized, all you need to do is change the value to some other value of your choice (8192 for 8 Mb, 16384 for 16 Mb, 65536 for 64 Mb, and so on…).

That’s it. I hope it is useful to you.

How to add Single Slider and Multi Slider to ASP .NET Page

Here I gave detailed explanation how to use single and multi handler slider in ASP.NET using AJAX slider control. Follow the below explanation and source code.

Client side
In the client side of the page I have create two slider control one for show single slider in web page and another is show example of multi slider in your webpage.

Single slider:
Single slider is used to show only single selected value in textbox, so we can get product from database from minimum amount to entered amount.

<%--Single slider Example--%>
<asp:MultiHandleSliderExtender ID="multiHandleSliderExtender1" runat="server" TargetControlID="TextBox1"
    BehaviorID="multiHandleSliderOne" Minimum="1" Maximum="100" BoundControlID="TextBox2"
    Steps="5" Length="100" TooltipText="{0}">          
    </asp:MultiHandleSliderExtender>            
<table width="600" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="2"><b>Single slider Extender</b></td>
</tr>
<tr>
<td height="40">Select price to be search</td>
<td style="padding-left:10px;"><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td height="40">Selected Value</td>
<td style="padding-left:10px;"><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
</tr>
 <tr>
<td height="40" align="center" colspan="2"><asp:Button ID="Button1" runat="server" 
        Text="Search" CssClass="btn" onclick="Button1_Click" /></td>
</tr>
</table>

In server side write query for search (single slider) search like this

protected void Button1_Click(object sender, EventArgs e)
{
    sqlcon.Open();
    sqlcmd = new SqlCommand("select * from prod where price between 0 and " + TextBox2.Text, sqlcon);
    da = new SqlDataAdapter(sqlcmd);
    da.Fill(dt);
    GridView1.DataSource = dt;
    GridView1.DataBind();
    sqlcon.Close();
}

Multi Slider:
If we use MultiHandle slider is show two or more slider in a web page for user select values like from and to price.

<%--Multi slider Example--%>
<asp:MultiHandleSliderExtender ID="multiHandleSliderExtenderTwo" runat="server" TargetControlID="sliderTwo"
    BehaviorID="multiHandleSliderTwo" Minimum="1" Maximum="100"
    Steps="5" Length="100" TooltipText="{0}">            
    <MultiHandleSliderTargets>
        <asp:MultiHandleSliderTarget ControlID="txtfrm" />
        <asp:MultiHandleSliderTarget ControlID="txtto"/>
    </MultiHandleSliderTargets>
    </asp:MultiHandleSliderExtender>
<table width="600" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="2"><b>Multi slider Extender</b></td>
</tr>
<tr>
<td height="40">Select price to be search</td>
<td style="padding-left:10px;"><asp:TextBox ID="sliderTwo" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>From</td>
<td style="padding-left:10px;"><asp:TextBox ID="txtfrm" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td height="40">To</td>
<td style="padding-left:10px;"><asp:TextBox ID="txtto" runat="server" Text="100"></asp:TextBox></td>
</tr>
<tr>
    <td height="40" align="center" colspan="2"><asp:Button ID="Button2" runat="server" 
            Text="Search" CssClass="btn" onclick="Button2_Click" /></td>
</tr>
</table>

In server side write query for search (Multi slider) search like this

protected void Button2_Click(object sender, EventArgs e)
{
    sqlcon.Open();
    sqlcmd = new SqlCommand("select * from prod where price between " + txtfrm.Text + " and " + txtto.Text , sqlcon);
    da = new SqlDataAdapter(sqlcmd);
    da.Fill(dt);
    GridView1.DataSource = dt;
    GridView1.DataBind();
    sqlcon.Close();
}

Complete Code
Client side

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!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>AJAX Single and Multi slider Example</title>
    <style type="text/css">
    .btn
    {
        background-color: #033280;
        color: White;
        font-size: 12px;
        font-weight: bold;   
    }   
        .style1
        {
            height: 40px;
        }
  </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <%--Single slider Example--%>
        <asp:MultiHandleSliderExtender ID="multiHandleSliderExtender1" runat="server" TargetControlID="TextBox1"
            BehaviorID="multiHandleSliderOne" Minimum="1" Maximum="100" BoundControlID="TextBox2"
            Steps="5" Length="100" TooltipText="{0}">          
            </asp:MultiHandleSliderExtender>            
        <table width="600" cellpadding="0" cellspacing="0" align="center">
        <tr>
        <td colspan="2"><b>Single slider Extender</b></td>
        </tr>
        <tr>
        <td height="40">Select price to be search</td>
        <td style="padding-left:10px;"><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
        <td height="40">Selected Value</td>
        <td style="padding-left:10px;"><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
        </tr>
         <tr>
        <td height="40" align="center" colspan="2"><asp:Button ID="Button1" runat="server" 
                Text="Search" CssClass="btn" onclick="Button1_Click" /></td>
        </tr>
        </table> 
            
         
      <%--Multi slider Example--%>
              
            <asp:MultiHandleSliderExtender ID="multiHandleSliderExtenderTwo" runat="server" TargetControlID="sliderTwo"
            BehaviorID="multiHandleSliderTwo" Minimum="1" Maximum="100"
            Steps="5" Length="100" TooltipText="{0}">
            <MultiHandleSliderTargets>
            <asp:MultiHandleSliderTarget ControlID="txtfrm" />
            <asp:MultiHandleSliderTarget ControlID="txtto"/>
            </MultiHandleSliderTargets>
            </asp:MultiHandleSliderExtender>
        <table width="600" cellpadding="0" cellspacing="0" align="center">
        <tr>
        <td colspan="2"><b>Multi slider Extender</b></td>
        </tr>
        <tr>
        <td height="40">Select price to be search</td>
        <td style="padding-left:10px;"><asp:TextBox ID="sliderTwo" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
        <td>From</td>
        <td style="padding-left:10px;"><asp:TextBox ID="txtfrm" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
        <td height="40">To</td>
        <td style="padding-left:10px;"><asp:TextBox ID="txtto" runat="server" Text="100"></asp:TextBox></td>
        </tr>
        <tr>
            <td height="40" align="center" colspan="2"><asp:Button ID="Button2" runat="server" 
                    Text="Search" CssClass="btn" onclick="Button2_Click" /></td>
        </tr>
        </table> 
        
         <%--Grid View for Display search record--%>
           
          <table width="600" cellpadding="0" cellspacing="0" align="center">
        <tr>
        <td colspan="2" height="60" align="center">
            <asp:GridView ID="GridView1" runat="server">
            </asp:GridView>
        </td>
        </tr>
        </table>
      
    </div>
    </form>
</body>
</html>

Server side

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;

public partial class _Default : System.Web.UI.Page 
{
    SqlConnection sqlcon = new SqlConnection(ConfigurationManager.ConnectionStrings["Con"].ConnectionString);
    SqlCommand sqlcmd = new SqlCommand();
    SqlDataAdapter da = new SqlDataAdapter();
    DataTable dt = new DataTable();

    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        sqlcon.Open();
        sqlcmd = new SqlCommand("select * from prod where price between 0 and " + TextBox2.Text, sqlcon);
        da = new SqlDataAdapter(sqlcmd);
        da.Fill(dt);
        GridView1.DataSource = dt;
        GridView1.DataBind();
        sqlcon.Close();
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        sqlcon.Open();
        sqlcmd = new SqlCommand("select * from prod where price between " + txtfrm.Text + " and " + txtto.Text , sqlcon);
        da = new SqlDataAdapter(sqlcmd);
        da.Fill(dt);
        GridView1.DataSource = dt;
        GridView1.DataBind();
        sqlcon.Close();
    }
}

Output
Slider_ouput

Source code:
Download the attached source code and try to learn AJAX Slider control and its uses.

Front End: ASP.NET 
Code Behind: C#

Conclusion:
I hope this article is help to know about AJAX Slider control in ASP.NET.

 Attachments