How To 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”. 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,

ggle

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:

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:

Step 6: Add Script files to the application

  • Add another script file for writing Angular scripts there.
  • Replace it with the code, given below:
  • 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

map

Using CDN links

Step 7:Add Index view for UI

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

Styles for Maps

Finally, run the Application and see the output in the Browser.

map2

Conclusion

I hope this tutorial is helpful for every reader and you learn how to integrate it into the MVC Application.

hflbnner