Integrating Google Map In ASP.Net Application

Vithal Wadje
9y
181.6k
0
5

Article

Background

There is always a requirement to use a map in a web application, so by considering the preceding requirement I decided to write this article. So let us learn step-by-step how to integrate Google Maps with an ASP.Net web application.

Key points for integrating Google Maps:

Google provides the free API to integrate Google Maps in our application.
You can customize Google Maps depending on your requirements.

Let us demonstrate the preceding points with an example by creating a web application as in the following:

"Start" - "All Programs" - "Microsoft Visual Studio 2010".
"File" - "New WebSite" - "C#" - "ASP.NET Empty Web Application" (to avoid adding a master page).
Provide the web site a name such as "GoogleMAPIntegration" or another as you wish and specify the location.
Then right-click on Solution Explorer - "Add New Item" then Default.aspx page.

Now the Default.aspx source code will look as in the following:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>

Now drag and drop the one div tag from HTML controls and specify the ID as follows:

<div id="canvasMap"> </div>

Now create a CSS class to provide some design to the form as in the following:

<style type="text/css">
html, body, #canvasMap {
height: 100%;
margin: 0px;
padding: 0px
}
</style>

Now create the JavaScript function to load the Google Maps as in the following:

<script type="text/javascript">
var map;
function LoadGoogleMAP() {
var SetmapOptions = {
zoom: 10,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('canvasMap'),
SetmapOptions);
}
google.maps.event.addDomListener(window, 'load', LoadGoogleMAP);
</script>

Now the entire source code of the Default.aspx page will look as in the following:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style type="text/css">
html, body, #canvasMap {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript">
var map;
function LoadGoogleMAP() {
var SetmapOptions = {
zoom: 10,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('canvasMap'),
SetmapOptions);
}
google.maps.event.addDomListener(window, 'load', LoadGoogleMAP);
</script>
</head>
<body>
<div id="canvasMap"> </div>
</body>
</html>