How to implement Google map in ASP.NET ?


In this article I have explained about how to implement Google map in ASP.NET application. In our website contact us page or other pages we like place Google map. This article help you learn how implement in your projects.

Learn how to implement Google map in ASP.NET?


Description:
In this article I have placed one textbox control to collect city name from user, based on the city name display location in the Google map.

1) Before that integration you need to create Google API key for your project. Click here to generate Google Map API Key after sign up and enter your website URL. API Key is look like "ABQIAAAA_mr7zRpGJ0vX6udAWFxOoxQv0BUlvCZ9OZNoOeNQxd1yxVj1aRTTTz1FO57BxsmvS_aMQ59Hv2fQ4g"

2) Add GMaps.dll as reference of your project.

Full Source code
After create API Key placed in web.config file.

<appSettings>
<add key="googlemaps.subgurim.net" value="ABQIAAAA_mr7zRpGJ0vX6udAWFxOoxQv0BUlvCZ9OZNoOeNQxd1yxVj1aRTTTz1FO57BxsmvS_aMQ59Hv2fQ4g" />
</appSettings>

Client side:

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

<%@ Register Assembly="GMaps" Namespace="Subgurim.Controles" TagPrefix="cc1" %>
<!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>Google Map Integration</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="2" height="40">
<b>Google Map Integration Example</b>
</td>
</tr>
<tr>
<td height="40" align="center" width="50%">
Enter Your city Name / Post Code
</td>
<td align="center">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
</td>
</tr>
<tr>
<td colspan="2" height="50" align="center">
<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
</td>
</tr>
<tr>
<td colspan="2" height="400" valign="middle">
<cc1:GMap ID="GMap1" runat="server" enableHookMouseWheelToZoom="True" enableRotation="True"
GZoom="7" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

Important Properties:

enableHookMouseWheelToZoom: It is used to Zoom your map level based on the mouse scroll.

enableRotation: This property is used to show rotation of your google map.

enableDoubleClickZoom: This property is used to zoom your map level based on the mouse double click event

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.Configuration;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
GMap1.Visible = false;
}
}
protected void Button1_Click(object sender, EventArgs e)
{
//Set Visible true or false of your google map based on the textbox text
if (TextBox1.Text != "")
{
GMap1.Visible = true;
}
else
{
GMap1.Visible = false;
}

string sStreetAddress = null;

Subgurim.Controles.GeoCode GeoCode = default(Subgurim.Controles.GeoCode);
//Get user typed text from text box
sStreetAddress = TextBox1.Text;
//pass your city name in the geo code request it return geo code
GeoCode = GMap1.geoCodeRequest(sStreetAddress);
//Add that geo code in
Subgurim.Controles.GLatLng gLatLng = new Subgurim.Controles.GLatLng(GeoCode.Placemark.coordinates.lat, GeoCode.Placemark.coordinates.lng);
//Set center of map based on latitude and longitude coordinates
GMap1.setCenter(gLatLng, 16, Subgurim.Controles.GMapType.GTypes.Normal);
Subgurim.Controles.GMarker oMarker = new Subgurim.Controles.GMarker(gLatLng);
//Bind that marker data in google map
GMap1.addGMarker(oMarker);
}
}

Source Code Detail:
Here with I have attached source code download it and try to learn about Google map integration in ASP.NET.

Front End : ASP.NET
Code Behind : C#

Output:
GmapOutput

Conclusion:
I hope this article is help you to learn about Google map integration in ASP.NET.


Attachments

  • Source_code (43507-221839-GoogleMapIntegration.rar)
  • Comments

    Guest Author: seputarsoftware15 Mar 2012

    I am glad to be a visitant of this utter blog ! , regards for this rare info ! .
    How to Use Google Maps in C#? thanks
    http://update-seputar-software.blogspot.com/2011/12/ultrabook-notebook-tipis-harga-murah.html

    Guest Author: sibi elango04 Jul 2012

    this code working perfectly.. thanks alot.. who to find a multiple location ?? if u can shaare that code :)



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: