jQuery Based AJAX ASP.NET MVC Google Maps Web App

Objective

The objective, here, is to create a country locator in which we have SQL Server database with a single table which contains a lookup of locations of all the countries, with their associated Latitude and Longitudes. So, the table is to be populated with the following data.

Latitude 

Using the above data, we will be creating a simple one page MVC web app in ASP.NET which shows a Google map with these locations plotted. There will be a search criteria box that allows the user to filter which locations to show. As they type, the pins should be dynamically plotted that match the criteria.

Some Specifications

  • UI must be ASP.NET MVC and should get refreshed without full page post back, i.e., we will be using jQuery based Ajax call.
  • Data format will be JSON that we need to pass to the server.
  • Data access technology will be Entity Framework.
  • Programming language will be C#.
  • If the search criteria box is empty, then show all Locations but do not plot any country.
  • If text is entered for the criteria, then perform a like query on the locations; i.e., if they enter just the single letter 'e', then all locations which start with an 'e' are returned.

What We Will Achieve

  1. When nothing is entered in the search box.

    Latitude 

  2. When we search for countries starting with “I”.

    Latitude 

Implementation Steps

Step 1

Let’s add entity data model to our ASP.NET MVC app, i.e., GoogleMap.

Latitude 

Step 2

Add a map controller and add an index action to it, which will return a view with list of all the locations.

Latitude 

Step 3

Let’s add a view Index as:

Latitude 

And it should display all the locations with search box, as shown below:

Latitude 

Step 4

Let us implement responsive search. To do so, we need to add jQuery and AJAX script files from NuGet and drag them onto view Index.

Latitude 

Step 5

We need to make a jQuery based AJAX call whenever a character is entered in the search text box by tracking keyup event and sending those characters to the Action search.

Latitude 

Step 6

Let’s implement the action Search and it should display a list of countries starting with the chart entered in the text box.

Latitude 

Latitude 

Step 7

Let us render Google maps and to do so, you need to add Google map API script file with key and create the object of google.maps.Maps, which will display the map as shown below.



Latitude 

Step 8

Now we will plot the map as per the search result with a pinlball.png. To do so, we need to create the object of google.maps.LatLng for each resulted Lat and Lng and pass it to the object of google.maps.Marker to plot that location. We need to plug our code in foreach loop of Ajax call success function. And it should work as expected.



Latitude 

Step 9

I need to clear the plotted locations in two scenarios, i.e., every time we make a new search and whenever the search text box is empty.

To do so, we need to keep track of all locations plotted in an array and clear those from the map before we make an AJAX call and when the search textbox is empty.

Latitude 

Step 10

The complete source code is given below.

Controller Source Code

  1. Hide Copy Code  
  2. using GoogleMap.Models;  
  3. using System;  
  4. using System.Collections.Generic;  
  5. using System.Linq;  
  6. using System.Web;  
  7. using System.Web.Mvc;  
  8.   
  9. namespace GoogleMap.Controllers {  
  10.     public class MapController: Controller {  
  11.         // GET: Map  
  12.         public ActionResult Index() {  
  13.             GoogleMapEntities GE = new GoogleMapEntities();  
  14.             return View(GE.Locations.ToList());  
  15.         }  
  16.   
  17.         [HttpPost]  
  18.         public ActionResult Search(string Location) {  
  19.             GoogleMapEntities GE = new GoogleMapEntities();  
  20.             var result = GE.Locations.Where(x => x.LocationName.StartsWith(Location)).ToList();  
  21.             return Json(result, JsonRequestBehavior.AllowGet);  
  22.         }  
  23.     }  
  24. }  
Index View Source Code
  1. @model IEnumerable < googlemap.models.location >  
  2.   
  3.     <  
  4.     script src = "~/Scripts/jquery-1.10.2.js" > < /script>  
  5. Hide Copy Code  
  6.     <  
  7.     table >  
  8.     <  
  9.     tbody >  
  10.     <  
  11.     tr >  
  12.     <  
  13.     td valign = "top" > @Html.TextBox("txtSearch"nullnew {  
  14.         @placeholder = 'Search A Country'  
  15.     }) <  
  16.     div id = "myData" > @foreach(var item in Model) {} <  
  17.     table class = "table" >  
  18.     <  
  19.     tbody >  
  20.     <  
  21.     tr >  
  22.     <  
  23.     td > @item.LocationName < /td> <  
  24.     /tr> <  
  25.     /tbody> <  
  26.     /table> <  
  27.     /div> <  
  28.     /td> <  
  29.     td valign = "top" >  
  30.     <  
  31.     div id = "googleMap"  
  32. style = "width:1000px;height:600px;" > < /div> <  
  33.     /td> <  
  34.     /tr> <  
  35.     /tbody> <  
  36.     /table>