Learn MVC Using Angular – Maps


In this article, we will learn to work with MVC using Angular Maps with two types of maps, which are given below.

  • Google Maps
  • Vector Map

Follow the steps given below to use the Angular map in MVC:

  • Create an MVC Project.
  • Configure the Google/Vector Map.
  • Work with Maps.

Create an MVC Project

Open Visual Studio 2015.


Go to New menu, click New >> Project. Now, it will open New Project window.


Select ASP.NET Web Application on Framework 4.6. Enter the name of the project in the “Solution name” text box and click OK.


One more window should appear. Select the MVC Template in this pop-up and click OK.

Configure Google Maps

We will download the Google UI-Map from the following links:

Open the _Layout.cshtml file and refer to the ui-map.min.js file in this View page.

Open the HTML page, then design it using the map attribute.


We have pointed the Map marker directive at an existing google.maps.Marker object, so that it can hook up the following events:

  • ui-map-marker
  • ui-event

JavaScript Code

Angular Module

Add the ui-map dependency to the Angular module.

Angular Controller

Set the values for the attribute. Open the “angular controller” files and hard code an input or you may get and bind the values.

Here, the Google Maps MapOptions object can be passed through the main directive attribute ui-map.

A ui-event allows you to specify the custom behavior of a user event. You just need to prefix the official event with map- to bind a callback to it.

After completing the entire configuration, add the reference file in the _Layout.cshtml page.

Now, when we run the application, we will see Google Maps with a marker.

Output 1


Configure the Vector Map

You can get this plug-in from here.

You will find various maps in here.

Open the _Layout.cshtml file and refer to the jQuery link in my application.

This script makes our jQuery link into a directive so we can easily access it in HTML.

Angular Directive

Now, set the options for this vector map.

Angular Controller

Use the following code to create series data loading in our world map:

Use the following code to create markers on the map:


The vector map will be exposed by using this directive’s vector-map.

Call the directive as an element in HTML.

Now, we are ready to look at the vector world map with our markers added in. So, run the application.

Output 2



In this article, we have learned to use MVC by using Angular Maps. If you have any queries, please tell me through the comments section.

Happy Coding!

Thiruppathi Rengasamy
I'm a Dotnet Developer & Blogger. And also I'm working as a senior software engineer. I would like to spend my precious time writing articles, research on .Net technologies, and learning new technologies.