Post
Ask Question

Integrating Google Map In ASP.Net Application

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:
  1. Google provides the free API to integrate Google Maps in our application.
  2. 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:

  1. "Start" - "All Programs" - "Microsoft Visual Studio 2010".
  2. "File" - "New WebSite" - "C#" - "ASP.NET Empty Web Application" (to avoid adding a master page).
  3. Provide the web site a name such as "GoogleMAPIntegration" or another as you wish and specify the location.
  4. 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:

  1. <html xmlns="http://www.w3.org/1999/xhtml">    
  2. <head runat="server">    
  3.     <title></title>    
  4. </head>    
  5. <body>    
  6.     <form id="form1" runat="server">    
  7.     <div>    
  8.         
  9.     </div>    
  10.     </form>    
  11. </body>    
  12. </html> 
Now drag and drop the one div tag from HTML controls and specify the ID as follows:
  1. <div id="canvasMap"> </div> 
Now create a CSS class to provide some design to the form as in the following:
  1. <style type="text/css">  
  2.       html, body, #canvasMap {  
  3.         height: 100%;  
  4.         margin: 0px;  
  5.         padding: 0px  
  6.       }  
  7.     </style> 
Now create the JavaScript function to load the Google Maps as in the following:
  1. <script type="text/javascript">  
  2.         var map;  
  3.         function LoadGoogleMAP() {  
  4.             var SetmapOptions = {  
  5.                 zoom: 10,  
  6.                 center: new google.maps.LatLng(-34.397, 150.644)  
  7.             };  
  8.             map = new google.maps.Map(document.getElementById('canvasMap'),  
  9.       SetmapOptions);  
  10.         }  
  11.   
  12.         google.maps.event.addDomListener(window, 'load', LoadGoogleMAP);  
  13.   
  14. </script> 
Now the entire source code of the Default.aspx page will look as in the following:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5. <html>  
  6.   <head>  
  7.     <title></title>  
  8.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">  
  9.     <meta charset="utf-8">  
  10.     <style type="text/css">  
  11.       html, body, #canvasMap {  
  12.         height: 100%;  
  13.         margin: 0px;  
  14.         padding: 0px  
  15.       }  
  16.     </style>  
  17.     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>  
  18.     <script type="text/javascript">  
  19.         var map;  
  20.         function LoadGoogleMAP() {  
  21.             var SetmapOptions = {  
  22.                 zoom: 10,  
  23.                 center: new google.maps.LatLng(-34.397, 150.644)  
  24.             };  
  25.             map = new google.maps.Map(document.getElementById('canvasMap'),  
  26.       SetmapOptions);  
  27.         }  
  28.   
  29.         google.maps.event.addDomListener(window, 'load', LoadGoogleMAP);  
  30.   
  31.     </script>  
  32.   </head>  
  33.   <body>  
  34.       
  35.     <div id="canvasMap"> </div>  
  36.   </body>  
  37. </html> 
Now run the application, the map will look as in the following:
 
 
The preceding is the simple Google Maps having functionality to zoom the map in and out. To zoom in and out the following slider is used:
 
 
The preceding slider is used to zoom the map in and out. You can also view the satellite view  by choosing the following options: 
 
 
You can also view the street map as in the following:
 
 
From all the preceding examples, we have learned how to integrate Google Maps into an ASP.Net web application.
 
Notes
  • Download the source code of the application for a detailed understanding.
  • You need an active internet connection to view the Google Maps.

Summary 

I hope this article is useful for all readers. If you have any suggestion then please contact me including beginners also.


Similar Articles