Introduction
Google Maps is the most spectacular app through which our day-to-day life becomes easier.
The database records hold the latitude and longitude information. It will be used to populate Google Maps with multiple markers in ASP.NET MVC Razor.
Description
In this article , I will show you how to show a marker on places like country, state, continent etc., using stored procedure.
To know more details about Google Map, go through my blogs and articles related to Google Map in MVC.
http://www.c-sharpcorner.com/members/satyaprakash-samantaray
Steps to be followed are given below.
Step1
Create a table named MyPlaces.
Table Script
- CREATE TABLE [dbo].[MyPlaces](
- [CityName] [varchar](50) NOT NULL,
- [CityLatitude] [numeric](18, 6) NOT NULL,
- [CityLongitude] [numeric](18, 6) NOT NULL,
- [CityDescription] [varchar](300) NULL,
- CONSTRAINT [PK_Table_1] PRIMARY KEY CLUSTERED
- (
- [CityName] ASC
- )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
- ) ON [PRIMARY]
- GO

Step 2
Create a stored procedure named Sp_GeoLoc.
Stored procedure script
- Create Procedure Sp_GeoLoc
- As
- Begin
- SELECT * FROM MyPlaces
- End
Execute the stored procedure.
- exec Sp_GeoLoc

Step 3
Create a MVC 5 Application named SatyaMVCGoogleMap.

Step 4
Put the connection string in Web.Config file.
Code ref
- <connectionStrings>
- <add name="ConString" connectionString="Put Your Connection String Here...."/>
- </connectionStrings>
Code description
This adds name ConString, which is important to add in controller class file to access the table and the stored procedure.

Step 5
Add a controller class file named HomeController.cs.
Code ref
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Web.Mvc;
- using System.Configuration;
- using System.Data.SqlClient;
- namespace SatyaMVCGoogleMap
- {
- public class HomeController : Controller
- {
- // GET: Home
- public ActionResult Index()
- {
- string markers = "[";
- string conString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
- SqlCommand cmd = new SqlCommand("Sp_GeoLoc");
- using (SqlConnection con = new SqlConnection(conString))
- {
- cmd.Connection = con;
- con.Open();
- using (SqlDataReader sdr = cmd.ExecuteReader())
- {
- while (sdr.Read())
- {
- markers += "{";
- markers += string.Format("'title': '{0}',", sdr["CityName"]);
- markers += string.Format("'lat': '{0}',", sdr["CityLatitude"]);
- markers += string.Format("'lng': '{0}',", sdr["CityLongitude"]);
- markers += string.Format("'description': '{0}'", sdr["CityDescription"]);
- markers += "},";
- }
- }
- con.Close();
- }
- markers += "];";
- ViewBag.Markers = markers;
- return View();
- }
- }
- }
Code description
You will need to import the namespaces given below.
- using System.Configuration;
- using System.Data.SqlClient;
Controller consists of the Index Action method. Inside this Action method, the records are fetched from the MyPlaces Table, using Sp_GeoLoc Stored Procedure .
Google Map needs an array of markers, which consists of CityName, CityLatitude, CityLongitude and CityDescription and hence a JavaScript Array is built from the fetched location records with the help of the string concatenation.
The generated string is assigned to a ViewBag object.
Using ADO.NET concept, I added my connection string reference add name and the stored procedure.
- string conString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
- SqlCommand cmd = new SqlCommand("Sp_GeoLoc");
With the help of string concatenation, all the column values are put in markers variable.
The array of markers which consists of CityName, CityLatitude, CityLongitude and CityDescription and hence a JavaScript array is built from the fetched location records with the help of string concatenation.
- string markers = "[";
- using (SqlDataReader sdr = cmd.ExecuteReader())
- {
- while (sdr.Read())
- {
- markers += "{";
- markers += string.Format("'title': '{0}',", sdr["CityName"]);
- markers += string.Format("'lat': '{0}',", sdr["CityLatitude"]);
- markers += string.Format("'lng': '{0}',", sdr["CityLongitude"]);
- markers += string.Format("'description': '{0}'", sdr["CityDescription"]);
- markers += "},";
- }
- }
- markers += "];";




Rizwan AliPosted May 11, 2022, 4:20 PM
Sir thanks for the Article Sir i have a question how can we connect these points to each other and make a geo fence plz sir rply me i am waiting your answer thanks
Android ShowPosted Apr 28, 2019, 8:08 AM
Map is not displayed, API I have. the map does not display
ABHIMANYU SINGHPosted Dec 22, 2018, 9:20 PM
Nice article, However, I am new to asp.net development (webform) and was trying to convert the code to asp.net. I am not sure, how I can pass the markers string in to clientside javascript to generate the map. Any help will be highly appriciated.
ABHIMANYU SINGHPosted Dec 22, 2018, 9:17 PM
Hi Satyaprakash,
Harshavradhan AdawadkarPosted Dec 7, 2018, 6:12 AM
Sir Its Working but Graph was not generated.....
Sachin ChourasiaPosted Jul 23, 2017, 8:18 AM
Gud one................
Former memberPosted May 24, 2017, 7:47 AM
Nice article shared.