Plot Multiple Locations on Google Map Dynamically in ASP.Net

This article shows how to create an application that fetches multiple addresses from a database, calculates their longitude and latitude and then plots the location on the Google map dynamically.

Here, I use the "GoogleMaps.LocationServices" API to get the longitude and latitude of an address.

"GoogleMaps.LocatinServices" is a simple library that allows you to translate latitude/longitude to a region (state) and an address to a map point.

You can install it in your application by running the following command in the Package Manager Console:

PM> Install-Package GoogleMaps.LocationServices

Or you can download it from:
http://www.nuget.org/packages/GoogleMaps.LocationServices/

Let's now proceed to create the application.

First, suppose I have a database table that contains the multiple address. Each row in the table specifies a unique address, including Address, City, State, Zip and Country.

Now, I fetch this table in an ASP.NET application and load it into a DataTable object.

Note: Here, I skip the DataAccess layer to fetch the records from the database.

After getting all records from the database, then calculate the latitude / longitude of each address using the "GoogleLocationService" API.

For this purpose, I create a method that calculates the latitude / longitude of each address and stores them in a List Obect.

I have also defined a class to store various properties of an address to be displayed on the map.

Here is the class declaration.

In the following method, a list of all objects of the "ProgramAddresses" class are created and then this list is serialized to a JSON string using "JsonSerializer". After that, register this JsonString to the client-side using the "RegisterArrayDeclaration"() method.