Hello everyone and thanks for your support. Today, I came up with another real time concept, "Integrating Google maps in ASP.NET MVC5 Web Applications". In previous days, we found the contact details for any company on organization contact pages, but now things have changed. Now, we can search any address through Google maps. Hence, there is a need to integrate the map address of our organization, as many of the site are sharing their address in the maps and are displaying it in their websites.
The above is the main reason to integrate maps in the websites. Now, in this tutorial, I am going to explain how to integrate Google maps in our MVC 5 Web Application, using AngularJS. For this, Google provides Map API. We can easily integrate it in our Application by passing Coordinates (latititude and longitude).
The Application final output is shown in the screenshot, given below,
Step 1 - Create New Project.
Go to File --> New --> Project --> ASP.NET Web Application under Web section --> Entry Application Name --> click OK --> select Empty template --> Checked MVC -->click OK.
Step 2 - Add a Database to project.
Go to Solution Explorer --> Right Click on App_Data folder --> Add --> New item --> Select SQL Server Database under data --> Enter Database name --> Add.
Step 3 - Create a table for store data
- Open Database -->Right Click Table folder --> Add New Table --> Add Columns --> Save --> Enter table name --> OK.
- In this tutorial, I have created a table(Locations) to store the markers location data.
- The table contains the columns, created below:
- CREATE TABLE [dbo].[Locations] (
- [LocationID] INT IDENTITY (1, 1) NOT NULL,
- [Title] VARCHAR (100) NOT NULL,
- [Lat] VARCHAR (10) NOT NULL,
- [Long] VARCHAR (10) NOT NULL,
- [Address] VARCHAR (200) NOT NULL,
- [ImagePath] VARCHAR (200) NOT NULL,
- PRIMARY KEY CLUSTERED ([LocationID] ASC)
- );
Step 4: Add Entity Data Model.
- Go to Solution Explorer -->right click Project name form Solution Explorer --> Add --> New item --> select ADO.net Entity Data Model under data --> Enter model name --> Add.
- A popup Window will come (Entity Data Model Wizard) --> select generate from database -->click Next.
- Chose your data connection --> select your database -->select Entity framework version(5.0 or 6.0) next --> select tables -->enter Model Namespace name-->click Finish.
Step 5: Add Controller for Index and Get Markers info
- Create a Controller and name it as HomeController.cs.
- Replace the code with the following code:
- public class HomeController: Controller
- {
-
- public ActionResult Index()
- {
- return View();
- }
-
-
- public JsonResult GetAllLocation()
- {
- using(MyDatabaseEntities dc = new MyDatabaseEntities())
- {
- var v = dc.Locations.OrderBy(a => a.Title).ToList();
- return new JsonResult
- {
- Data = v, JsonRequestBehavior = JsonRequestBehavior.AllowGet
- };
- }
- }
-
- public JsonResult GetMarkerData(int locationID)
- {
- using(MyDatabaseEntities dc = new MyDatabaseEntities())
- {
- Location l = null;
- l = dc.Locations.Where(a => a.LocationID.Equals(locationID)).FirstOrDefault();
- return new JsonResult
- {
- Data = l, JsonRequestBehavior = JsonRequestBehavior.AllowGet
- };
- }
- }
- }
Step 6: Add Script files to the application
- Add another script file for writing Angular scripts there.
- Replace it with the code, given below:
- var app = angular.module('myapp', ['uiGmapgoogle-maps']);
- app.controller('mapsController', function($scope, $http)
- {
-
- $scope.map =
- {
- center:
- {
- latitude: 17.406278,
- longitude: 78.469060
- },
- zoom: 16
- }
- $scope.markers = [];
- $scope.locations = [];
-
- $http.get('/home/GetAllLocation').then(function(data)
- {
- $scope.locations = data.data;
- }, function()
- {
- alert('Error');
- });
-
- $scope.ShowLocation = function(locationID)
- {
- $http.get('/home/GetMarkerData',
- {
- params:
- {
- locationID: locationID
- }
- }).then(function(data)
- {
- $scope.markers = [];
- $scope.markers.push
- ({
- id: data.data.LocationID,
- coords:
- {
- latitude: data.data.Lat,
- longitude: data.data.Long
- },
- title: data.data.title,
- address: data.data.Address,
- image: data.data.ImagePath
- });
-
- $scope.map.center.latitude = data.data.Lat;
- $scope.map.center.longitude = data.data.Long;
- }, function()
- {
- alert('Error');
- });
- }
-
- $scope.windowOptions =
- {
- show: true
- };
- });
- Here, I explained using comments in the code. I think you can easily understand by seeing them. Add Angular Reference files to the project in Index page or _Layout page.
- We can use either CDN links or can install using Nuget Package Manager console.
Using NuGet
Using CDN links
- @* AngularJS library *@
- <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
- @* google map*@
- <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
- <script src="//rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
- <script src="~/Scripts/map.js"></script>
Step 7:Add Index view for UI
- Add view to the Index action method. Replace the code, given below:
- <div ng-app="myapp" ng-controller="mapsController">
-
- <div class="locations">
- <ul>
- <li ng-repeat="l in locations" ng-click="ShowLocation(l.LocationID)"><a href="#">{{l.Title}}</a></li>
- </ul>
- </div>
- <div class="maps">
-
- <ui-gmap-google-map style="box-shadow:2px 2px 2px 2px lightgrey" center="map.center" zoom="map.zoom">
- <ui-gmap-marker ng-repeat="marker in markers" coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
- <ui-gmap-window options="windowOptions" show="windowOptions.show">
- <div style="max-width:200px">
- <div class="header"><strong>{{marker.title}}</strong></div>
- <div id="mapcontent">
- <p>
- <img ng-src="{{marker.image}}" style="width:200px; height:100px" />
- <div>{{marker.address}}</div>
- </p>
- </div>
- </div>
- </ui-gmap-window>
- </ui-gmap-marker>
- </ui-gmap-google-map>
- </div>
- </div>
Styles for Maps
- .angular-google-map-container
- {
- height: 300px;
- box-shadow:2px 2px 3px 3px lightgrey;
- }
- .angular-google-map
- {
- width: 80%;
- height: 100%;
- margin: auto 0px;
- }
Finally, run the Application and see the output in the Browser.
Download source code for this application here
Source code
Conclusion
I hope this tutorial is helpful for every reader and you learn how to integrate it into the MVC Application.