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.



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.
   
   
   
   
2. When we search for countries starting with “I”.
   
   
   

Implementation Steps

Step 1

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



Step 2

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



Step 3

Let’s add a view Index as:



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



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.



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.



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.





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.





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.





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.



Step 10

The complete source code is given below.

Controller Source Code

Hide Copy Code
using GoogleMap.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace GoogleMap.Controllers {
    public class MapController: Controller {
        // GET: Map
        public ActionResult Index() {
            GoogleMapEntities GE = new GoogleMapEntities();
            return View(GE.Locations.ToList());
        }

        [HttpPost]
        public ActionResult Search(string Location) {
            GoogleMapEntities GE = new GoogleMapEntities();
            var result = GE.Locations.Where(x => x.LocationName.StartsWith(Location)).ToList();
            return Json(result, JsonRequestBehavior.AllowGet);
        }
    }
}

Index View Source Code

@model IEnumerable < googlemap.models.location >

    <
    script src = "~/Scripts/jquery-1.10.2.js" > < /script>
Hide Copy Code
    <
    table >
    <
    tbody >
    <
    tr >
    <
    td valign = "top" > @Html.TextBox("txtSearch", null, new {
        @placeholder = 'Search A Country'
    }) <
    div id = "myData" > @foreach(var item in Model) {} <
    table class = "table" >
    <
    tbody >
    <
    tr >
    <
    td > @item.LocationName < /td> <
    /tr> <
    /tbody> <
    /table> <
    /div> <
    /td> <
    td valign = "top" >
    <
    div id = "googleMap"
style = "width:1000px;height:600px;" > < /div> <
    /td> <
    /tr> <
    /tbody> <
    /table>