Post
Ask Question

Integrating Google MAP With Auto Location Search In ASP.Net Application

Background

Due to changing business needs and the quick growth of technology, in today's web applications users want many options and capabilities in their applications. So let us learn in this article how to integrate the Google auto-complete search for places in maps.
 
Google provides many facilities to their users and other developers working on various technologies to integrate their product into applications.
 
Google Place Autocomplete Map Search
 
This feature is provided by Google and is in their Google Maps JavaScript API. With it people can enter any place around the world and then the search box will return a list of places in the world depending on that input.
 
To use the Google Maps Place Autocomplete search of the JavaScript API, use the following methods:
  1. LatLngBounds
  2. fitBounds
  3. getBounds
  4. setBounds
  5. getPlaces

Using the preceding JavaScript methods you can integrate Google Maps Search Places into your application. The following are some of the features of a Google Maps Place Autocomplete search.

Key points for integrating Google Maps:

  1. Google provides the free JavaScript API to integrate Google Maps into our applications.
  2. You can customize Google Maps depending on your requirements.
  3. its provides the suggestion while typing.

Let us see the preceding points with an example by creating a web application using 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 "GoogleLocationSearch" 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. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"  
  4.     Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>  
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  6. <html>  
  7.   <head>  
  8.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">  
  9.     <meta charset="utf-8">  
  10.     
  11.     <title>Article by Vithal Wadje</title>  
  12.    
  13.   </head>  
  14.   <body bgcolor="Blue">  
  15.     <h5 style="color:White;">  
  16.         Article for C# corner</h5>  
  17.   
  18.   </body>  
  19. </html> 
Now add one HTML input TextBox control and div tag on the default.aspx page and specify the ID as follows:
  1. <input id="txtsearch" class="apply" type="text" placeholder="Enter Search Place e.g C# Corner Noida">  
  2.   <div id="divloadMap"></div> 
Now let us add a stylesheet CCS file by right-clicking on the solution and create the following CSS classes:
  1. html, body,#divloadMap {  
  2.         height: 100%;  
  3.         margin: 0px;  
  4.         padding: 0px;  
  5.         margin-top:15px  
  6.       }  
  7.       
  8.       .apply {  
  9.         margin-top: 16px;  
  10.         border: 1px solid transparent;  
  11.         border-radius: 2px 0 0 2px;  
  12.         box-sizing: border-box;  
  13.         -moz-box-sizing: border-box;  
  14.         height: 32px;  
  15.         outline: none;  
  16.         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);  
  17.       }  
  18.   
  19.       #txtsearch {  
  20.         background-color: #fff;  
  21.         padding: 0 11px 0 13px;  
  22.         width: 400px;  
  23.         font-family: Roboto;  
  24.         font-size: 15px;  
  25.         font-weight: 300;  
  26.         text-overflow: ellipsis;  
  27.       }  
  28.   
  29.       #txtsearch:focus {  
  30.         border-color: #4d90fe;  
  31.         margin-left: -1px;  
  32.         padding-left: 14px;    
  33.         width: 401px;  
  34.       }  
  35.   
  36.       .pac-container {  
  37.         font-family: Roboto;  
  38.       }  
  39.   
  40.       #type-selector {  
  41.         color: #fff;  
  42.         background-color: #4d90fe;  
  43.         padding: 5px 11px 0px 11px;  
  44.       }  
  45.   
  46.       #type-selector label {  
  47.         font-family: Roboto;  
  48.         font-size: 13px;  
  49.         font-weight: 300;  
  50.       } 
Now add the JavaScript file to Solution Explorer to call the Google Maps JavaScript API as in the following:
 
 
Now create the following functions to call the Google Maps API:
  1. //creating function to load initial MAP when page loading   
  2. function LoadGoogleMAP() {  
  3.   
  4.     var markers = [];  
  5.     var map = new google.maps.Map(document.getElementById('divloadMap'), {  
  6.         mapTypeId: google.maps.MapTypeId.ROADMAP  
  7.     });  
  8.   
  9.     var defaultBounds = new google.maps.LatLngBounds(  
  10.       new google.maps.LatLng(-33.8902, 151.1759),  
  11.       new google.maps.LatLng(-33.8474, 151.2631));  
  12.     map.fitBounds(defaultBounds);  
  13.   
  14.     // Create the search box and link it to the UI element.  
  15.     var input =(document.getElementById('txtsearch'));  
  16.     map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);  
  17.   
  18.     var searchBox = new google.maps.places.SearchBox((input));  
  19.   
  20.      
  21.     // Listen for the event fired when the user selects an item from the  
  22.     // pick list. Retrieve the matching places for that item.  
  23.     google.maps.event.addListener(searchBox, 'places_changed', function () {  
  24.         var places = searchBox.getPlaces();  
  25.   
  26.         if (places.length == 0) {  
  27.             return;  
  28.         }  
  29.         for (var i = 0, marker; marker = markers[i]; i++) {  
  30.             marker.setMap(null);  
  31.         }  
  32.   
  33.         // For each place, get the icon, place name, and location.  
  34.         markers = [];  
  35.         var bounds = new google.maps.LatLngBounds();  
  36.         for (var i = 0, place; place = places[i]; i++) {  
  37.             var image = {  
  38.                 url: place.icon,  
  39.                 size: new google.maps.Size(71, 71),  
  40.                 origin: new google.maps.Point(0, 0),  
  41.                 anchor: new google.maps.Point(17, 34),  
  42.                 scaledSize: new google.maps.Size(25, 25)  
  43.             };  
  44.   
  45.             // Create a marker for each place.  
  46.             var marker = new google.maps.Marker({  
  47.                 map: map,  
  48.                 icon: image,  
  49.                 title: place.name,  
  50.                 position: place.geometry.location  
  51.             });  
  52.   
  53.             markers.push(marker);  
  54.   
  55.             bounds.extend(place.geometry.location);  
  56.         }  
  57.   
  58.         map.fitBounds(bounds);  
  59.     });  
  60.       
  61.   
  62.       
  63.     // current map's viewport.  
  64.     google.maps.event.addListener(map, 'bounds_changed', function () {  
  65.         var bounds = map.getBounds();  
  66.         searchBox.setBounds(bounds);  
  67.     });  
  68. }  
  69.   
  70. google.maps.event.addDomListener(window, 'load', LoadGoogleMAP); 
Now add the stylesheet and JavaScript file reference into the default.aspx page then the default.aspx page entire code will look as follows:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"  
  4.     Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>  
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  6. <html>  
  7.   <head>  
  8.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">  
  9.     <meta charset="utf-8">  
  10.     
  11.     <title>Article by Vithal Wadje</title>  
  12.     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>  
  13.       <script src="GoogleAPIScript.js" type="text/javascript"></script>  
  14.       <link href="MapStyleSheet.css" rel="stylesheet" type="text/css" />  
  15.     
  16.    
  17.   </head>  
  18.   <body bgcolor="Blue">  
  19.     <h5 style="color:White;">  
  20.         Article for C# corner</h5>  
  21.     <input id="txtsearch" class="apply" type="text" placeholder="Enter Search Place e.g C# Corner Noida">  
  22.     <div id="divloadMap"></div>  
  23.   </body>  
  24. </html> 
Now run the application. The initial map will look as follows:
 
 
Now enter a place into the preceding search text box. Let us assume I am searching for MCN solutions, then it gives the following auto-complete search places suggestions:
 
 
In the preceding example, you see that it gives the auto-complete text box while I am searching the places in Google Maps. Now let us enter a city name now; it shows the following suggestions: 
 
 
Now let us consider I am searching for Noida and after clicking on the suggested text, its shows the location as follows: 
 
 
From all the preceding examples, we have learned how to integrate Google Maps Auto Location search 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 Google Maps.

Summary

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


Similar Articles