Integrate Google Maps in ASP.Net MVC using VB.NET and C#

In this tutorial, I will explain how to integrate Google Maps within your MVC application using vb.net 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.

DesignView

Locations Design

SQL

CREATE TABLE [dbo].[Locations]
(   [Id] INT NOT NULL PRIMARY KEY, 
    [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;

VB.NET

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;

                conn.Open();

                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 += "},";

                    }

                }

                conn.Close();

            }

            markers += "];";

            ViewBag.Markers = markers;

            return View();
        
    }

VB.NET

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

    conn.Open()

    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

    conn.Close()
  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.

HTML

@{

    Layout = null;

}

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

    &lt;meta name="viewport" content="width=device-width" /&gt;

    &lt;title&gt;Google Maps Layout&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

    &lt;div id="Map" style="width: 800px; height: 800px"&gt;

    &lt;/div&gt;

    &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=yourKey"&gt;&lt;/script&gt;

    &lt;script type="text/javascript"&gt;

        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 &lt; markers.length; i++) {

                var data = markers[i]

                var myLatlng = new google.maps.LatLng(data.lat, 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) {

                        infoWindow.setContent(data.description);

                        infoWindow.open(map, marker);

                    });

                })(marker, data);

            }

        }

    &lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;

Now run the application.

MVC Google Maps

Integrate Google Maps in ASP.Net MVC using VB.NET and C#

Comments

Write a Reply or Comment Cancel reply