In this tutorial, I will explain how to integrate Google Maps within your MVC application using and C#. As an example we will use three US cities as an example:

  • Nashville, TN
  • Detroit, MI
  • Los Angeles, CA

So let’s get started by creating the Database table as shown below.


Locations Design


CREATE TABLE [dbo].[Locations]
    [CityName] NVARCHAR(100) NULL, 
    [Latitude] NUMERIC(18, 6) NULL, 
    [Longitude] NUMERIC(18, 6) NULL, 
    [Description] NVARCHAR(100) NULL

Add the data to the table.

Locations Data

Now create a new MVC web application. Add the following namespace to the HomeController:


using System.Data.SqlClient;
using System.Configuration;


Imports System.Data.SqlClient
Imports System.Configuration

Google maps require an array of Markers which contains the city name, latitude, longitude, and description. The code below will generate a marker then assign its value to the ViewBag object.C#


public ActionResult Index()
            string markers = "[";

            string strConn = "Data Source=TutorialsPanel-PC\SQLEXPRESS;Initial Catalog=TutorialsPanel;Integrated Security=True;Pooling=False";

            SqlCommand cmd = new SqlCommand("SELECT * FROM Locations");

            using (SqlConnection conn = new SqlConnection(strConn))


                cmd.Connection = conn;


                using (SqlDataReader reader= cmd.ExecuteReader())


                    while (reader.Read())


                        markers += "{";

                        markers += string.Format("'title': '{0}',", reader["CityName"]);

                        markers += string.Format("'lat': '{0}',", reader["Latitude"]);

                        markers += string.Format("'lng': '{0}',", reader["Longitude"]);

                        markers += string.Format("'description': '{0}'", reader["Description"]);

                        markers += "},";





            markers += "];";

            ViewBag.Markers = markers;

            return View();


Public Function Index() As ActionResult
  Dim markers As String = "["

  Dim strConn As String = "Data Source=TutorialsPanel-PC\SQLEXPRESS;Initial Catalog=TutorialsPanel;Integrated Security=True;Pooling=False"

  Dim cmd As New SqlCommand("SELECT * FROM Locations")

  Using conn As New SqlConnection(strConn)

    cmd.Connection = conn


    Using reader As SqlDataReader = cmd.ExecuteReader()

      While sdr.Read()

        markers += "{"

        markers += String.Format("'title': '{0}',", reader("CityName"))

        markers += String.Format("'lat': '{0}',", reader("Latitude"))

        markers += String.Format("'lng': '{0}',", reader("Longitude"))

        markers += String.Format("'description': '{0}'", reader("Description"))

        markers += "},"

      End While
    End Using

  End Using

  markers += "];"

  ViewBag.Markers = markers

  Return View()

End Function

Now let’s move to the view of our application. We will use the Index View to render our maps.

Note: to use the Google Maps API; you need to obtain an API key. Click here for more information about how to get a Google maps API.



    Layout = null;


<!DOCTYPE html>



    <meta name="viewport" content="width=device-width" />

    <title>Google Maps Layout</title>



    <div id="Map" style="width: 800px; height: 800px">


    <script type="text/javascript" src=""></script>

    <script type="text/javascript">

        var markers = @Html.Raw(ViewBag.Markers);

        window.onload = function () {

            var mapOptions = {

                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),

                zoom: 8,

                mapTypeId: google.maps.MapTypeId.ROADMAP


            var infoWindow = new google.maps.InfoWindow();

            var map = new google.maps.Map(document.getElementById("Map"), mapOptions);

            for (i = 0; i < markers.length; i++) {

                var data = markers[i]

                var myLatlng = new google.maps.LatLng(, data.lng);

                var marker = new google.maps.Marker({

                    position: myLatlng,

                    map: map,

                    title: data.title


                (function (marker, data) {

                    google.maps.event.addListener(marker, "click", function (e) {


              , marker);


                })(marker, data);






Now run the application.

MVC Google Maps

Last modified: March 8, 2019


Write a Reply or Comment

Your email address will not be published.