Integrate google map in asp.net MVC

Integrate Google Map in MVC using Latitude and Longitude from Database Table.

1>Create a Table GoogleMap

2>Create a Model for GoogleMap table.

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Web;

namespace ItsMe.Areas.Admin.Models
{
    [Table("GoogleMap")]
    public class GoogleMap
    {
        [Key]
        public int Id { get; set; }
        public string Latitude { get; set; }
        public string Longitude { get; set; }
        public string Description { get; set; }
        public bool Status { get; set; }
    }
}


3> Map the Model with DefaultConnection File.

4>Create a GoogleMapController for insert , update , delete and detail operation.


using ItsMe.Areas.Admin.Models;
using ItsMe.Services;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ItsMe.Areas.Admin.Controllers
{
    public class GoogleMapController : Controller
    {
        GoogleMapService _googlemap = new GoogleMapService();
        public ActionResult Index()
        {
            return View(_googlemap.GetAll());
        }

        public ActionResult Create()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Create(GoogleMap model)
        {
            if (ModelState.IsValid)
            {
                _googlemap.Insert(model);
                return RedirectToAction("Index");
            }
            return View(model);
        }


        public ActionResult Edit(int id)
        {
            return View(_googlemap.GetById(id));
        }

        [HttpPost]
        public ActionResult Edit(GoogleMap model)
        {
            if (ModelState.IsValid)
            {
                var googlemap = _googlemap.GetById(model.Id);
                googlemap.Latitude = model.Latitude;
                googlemap.Longitude = model.Longitude;
                googlemap.Description = model.Description;
                googlemap.Status = model.Status;
                _googlemap.Update(googlemap);
                return RedirectToAction("Index");
            }
            return View(model);
        }


        public ActionResult Delete(int id)
        {
            return View(_googlemap.GetById(id));
        }

        [HttpPost]
        public ActionResult Delete(GoogleMap model)
        {
            if (ModelState.IsValid)
            {
                var googlemap = _googlemap.GetById(model.Id);
                _googlemap.Delete(googlemap);
                return RedirectToAction("Index");
            }
            return View(model);
        }
        public ActionResult GoogleMapView(int id)
        {
            return View(_googlemap.GetById(id));
        }

    }
}


5>Create View for Create ,Edit, Delete and GoogleMapView.cshtml.

Let focus on Index and GoogleMap  Actions view.

INDEX View.


@model IEnumerable<ItsMe.Areas.Admin.Models.GoogleMap>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Latitude)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Longitude)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Description)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Status)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Latitude)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Longitude)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Description)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Status)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Google Map", "GoogleMapView", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
    </tr>
}

</table>

7> Now we Integrate the  Google Map Api in  GoogleMapView.cshtml.

@{
    ViewBag.Title = "GoogleMapView";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<link href="~/Content/GoogleMap/styles.css" rel="stylesheet" />
<section class="contact" id="contact">
    <div class="container">
     
        <div id="map-canvas"></div>
     
    </div>
</section>
<br />
<a href="@Url.Action("Index")">Back to list</a>
<!--Google Maps API-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDnycWatbGyK6ldFqErjFtko1yeMclNUOA&amp;sensor=true"></script>



<script>
    var lat=@Model.Latitude;
    var long=@Model.Longitude;
    var mycenter=new google.maps.LatLng(lat, long);
    function initialize() {
        var mapOptions = {
            center: mycenter,
            zoom: 19,
            mapTypeId: google.maps.MapTypeId.HYBRID,//MapTypeId.ROADMAP
            scrollwheel: true,
            draggable: true,
            panControl: true,
            zoomControl: true,
            mapTypeControl: true,
            scaleControl: true,
            streetViewControl: true,
            overviewMapControl: true,
            rotateControl: true,
       
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        var marker=new google.maps.Marker({
            position:mycenter,
            animation:google.maps.Animation.BOUNCE
        });
        marker.setMap(map);

    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>


8> Click in GoogleMap in Index View Link.

Thank you.

Author : praneet kumar

Share this