Download Project  (Full Project)

Step 1:

In this tutorial I will show how to Google Maps Search location and load selected location. First create database we are precisely create it in part three. Now we are some modify the column. Open our existing project and add dropdown list in view. This view add the dropdown list this dropdown contain the address help of Google map. When we select the dropdown then the Google map zoom the location.  In this view we are use the jQuery and also rezor. Given bellow the view code:

@{
    ViewBag.Title = "Home Page";
}
<style>
    #map {
        height: 500px;
    }
</style>
<br /><br />
<div>
    <select class="form-control" id="selectedValue" onchange="GoLocation(this.value)">

        <option>--Select--</option>
        @foreach (var item in ViewBag.ListOfDropdown)
        {
            <option value="@item.Id">@item.Address</option>
        }

    </select>
</div>
<br />
<div id="map"></div>

<script>
    var map;
    function initMap(zoomeLevel,latDb,longDb) {
        map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: latDb!=null?latDb:23.778074, lng:longDb!=null?longDb:90.397514 },
            zoom: zoomeLevel!=null?zoomeLevel:6
        });

       

    }
    function GoLocation(locationId) {
        $.get("/Home/GetAllLocationById?id=" + locationId, function (data, status) {
            var iconName = data.Rating == 1 ? "../Icons/one.png" : data.Rating == 2 ? "../Icons/two.png" : "../Icons/three.png";
            initMap(data.Zoom, data.Lat, data.Long);
            marker = new google.maps.Marker({
                position: { lat: data.Lat, lng: data.Long },
                map: map,
                icon: iconName
            });
            contentString = '<div id="content">' +
                                '<div id="siteNotice">' +
                                '</div>' +
                                '<h1 id="firstHeading" class="firstHeading">' + data.Address + '</h1>' +
                                '<div id="bodyContent">' +
                                '<p><b>' + data.Address + '</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
                                'sandstone rock formation in the southern part of the ' +
                                'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) ' +
                                'south west of the nearest large town, Alice Springs; 450&#160;km ';
            infowindow = new google.maps.InfoWindow({
                content: contentString
            });
            google.maps.event.addListener(marker, 'mouseover', (function (marker, i) {
                return function () {
                    infowindow.open(map, marker);
                }
            })(marker, i));
            google.maps.event.addListener(marker, 'mouseout', (function (marker, i) {
                return function () {
                    infowindow.close();
                }
            })(marker, i));
        })
    }
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDJOZd-P3bAJXBAYtfryQT_GTv61uRehMs&callback=initMap" async defer></script>

Step 2:

Now Home controller have some method to like index method set into viewbag location name and pass the view.  GetAllLocation method get all location from database and send data into view by json format. GetAllLocationById method take id parameter and search the location and pass the view. Given bellow the 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 HomeController : Controller
    {
        TestDbEntities context = new TestDbEntities();
        public ActionResult Index()
        {
            ViewBag.ListOfDropdown = context.google_map.ToList();
            return View();
        }
        public JsonResult GetAllLocation()
        {
            var data = context.google_map.ToList();
            return Json(data, JsonRequestBehavior.AllowGet);
        }
        public JsonResult GetAllLocationById(int id)
        {
            var data = context.google_map.Where(x => x.Id == id).SingleOrDefault();
            return Json(data, JsonRequestBehavior.AllowGet);
        }
    }
}

Step 3:

Now build and run the project.