Post
Ask Question

Displaying Google Maps in ASP.NET Application

In this article I am going to explain toyou about Google Maps and how to integrate it to search any location in ASP.NET.

Google Maps is a Web-based service that provides detailed information about geographical regions and sites around the world. Google Maps began as a C++ desktop program designed by Lars and Jens Eilstrup Rasmussen at Where 2 Technologies. In October 2004, the company was acquired by Google, which converted it into a web application.

Nowadays Google Maps is used in every application for various requirements. Here in this article I am going to discuss how to integrate Google Maps to search any location in ASP.NET.

First of all, to integrate Google Maps create a new project in Visual studio. Add a new webform as follows.

Design the webform as in the following:

 
Add the following script in the head section. 
  1. <head runat="server">  
  2.     <title></title>  
  3.   
  4.      <!DOCTYPE link href="https://maps/documentation/javascript/examples/default.css" rel="stylesheet" />  
  5. <html>  
  6.     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>  
  7.     <script>  
  8.         var mapcode;  
  9.         var diag;  
  10.         function initialize() {  
  11.             mapcode = new google.maps.Geocoder();  
  12.             var lnt = new google.maps.LatLng(26.45, 82.85);  
  13.             var diagChoice = {  
  14.                 zoom: 9,  
  15.                 center: lnt,  
  16.                 diagId: google.maps.MapTypeId.ROADMAP  
  17.             }  
  18.             diag = new google.maps.Map(document.getElementById('map_populate'), diagChoice);  
  19.         }  
  20.         function getmap() {  
  21.             var completeaddress = document.getElementById('txt_location').value;  
  22.             mapcode.geocode({ 'address': completeaddress }, function (results, status) {  
  23.                 if (status == google.maps.GeocoderStatus.OK) {  
  24.                     diag.setCenter(results[0].geometry.location);  
  25.                     var hint = new google.maps.Marker({  
  26.                         diag: diag,  
  27.                         position: results[0].geometry.location  
  28.                     });  
  29.                 } else {  
  30.                     alert('Location Not Tracked. ' + status);  
  31.                 }  
  32.             });  
  33.         }  
  34.         google.maps.event.addDomListener(window, 'load', initialize);  
  35.     </script>  
  36.   
  37.     </html>  
  38. </head>  
Now add the following div to populate the google map. Here is my complete HTML code. 
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.      
  4.         <div>  
  5.             <h1>Enter Your Location Details</h1>  
  6.         </div>  
  7.         <div>  
  8.             <asp:TextBox ID="txt_location" TextMode="MultiLine" Width="400px" Height="70px" runat="server"></asp:TextBox>  
  9.     </div>  
  10.         <div>  
  11.             <input type="button" value="Search" onclick="getmap()">  
  12.         </div>  
  13.     <div id="map_populate" style="width:100%; height:500px; border: 5px solid #5E5454;">  
  14.     </div>  
  15.     </form>  
Here I am attaching the screen shot of my UI.

 
Now save and run the application.
 
 
 
Now type any location and press the search button, it will search the location and will be shown in the div.
 
 
 
In this way we can search any location detail in Google maps. 
 
Read more articles on Google Map implementation:


Similar Articles