Integrate Google Maps Using Angular In MVC 5

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

1. Open Database -->Right Click Table folder --> Add New Table --> Add Columns --> Save --> Enter table name --> OK.
   
2. In this tutorial, I have created a table(Locations) to store the markers location data.
   
3. 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.

1. 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.
   
2. A popup Window will come (Entity Data Model Wizard) --> select generate from database -->click Next.
   
3. 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

1. Create a Controller and name it as HomeController.cs.
   
2. Replace the code with the following code:
   

   public class HomeController: Controller
   {
       //This action displays Maps information
       public ActionResult Index()
           {
               return View();
           }
           //GetAllLocation - for fetch all the location from database and show in the view
           //Shows all the locations in default map here.
       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
                   };
               }
           }
           //This method gets the markers info from database.
       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

1. Add another script file for writing Angular scripts there.
   
2. Replace it with the code, given below:
   

   var app = angular.module('myapp', ['uiGmapgoogle-maps']); //dependency we should add to angular application
   app.controller('mapsController', function($scope, $http)
   {
       //this is default coordinates for the map when it loads for first time
       $scope.map =
         {
           center:
           {
               latitude: 17.406278,
               longitude: 78.469060
           },
           zoom: 16
       }
       $scope.markers = [];
       $scope.locations = [];
       //to get all the locations from the server
       $http.get('/home/GetAllLocation').then(function(data)
       {
           $scope.locations = data.data;
       }, function()
       {
           alert('Error');
       });
       //service that gets makers info from server
       $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, //title of the makers
                       address: data.data.Address, //Address of the makers
                       image: data.data.ImagePath //image --optional
                   });
                   //set map focus to center
                   $scope.map.center.latitude = data.data.Lat;
                   $scope.map.center.longitude = data.data.Long;
               }, function()
               {
                   alert('Error'); //shows error if connection lost or error occurs
               });
           }
           //Show or Hide marker on map using options passes here
       $scope.windowOptions =
         {
           show: true
       };
   });

3. 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.
   
4. 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

1. Add view to the Index action method. Replace the code, given below:
   

   <div ng-app="myapp" ng-controller="mapsController">
       <!--It displays the markers links-->
       <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">
           <!-- Add directive code (gmap directive) for show map and markers-->
           <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.

See this tutorial in my blog(for reference) Integrating google maps in asp.net mvc using angular js.