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.

public class ProgramAddresses
{
    public ProgramAddresses()
    {
    }
    public string description { get; set; }
    public double lng { get; set; }
    public double lat { get; set; }
}

Add the following namespaces to the .cs file:

using System.Runtime.Serialization.Json;
using GoogleMaps.LocationServices;

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.

private void BindGMap(DataTable datatable)
{
  try
  {
    List<ProgramAddresses> AddressList = new List<ProgramAddresses>();
    foreach (DataRow dr in datatable.Rows)
    {
        string FullAddress = dr["Address"].ToString() + " " + dr["City"].ToString() + ", " + dr["Country"].ToString() + " " + dr["StateName"].ToString() + " " + dr["ZipCode"].ToString();
        ProgramAddresses MapAddress = new ProgramAddresses();
        MapAddress.description = FullAddress;
        var locationService = new GoogleLocationService();
        var point = locationService.GetLatLongFromAddress(FullAddress);
        MapAddress.lat = point.Latitude;
        MapAddress.lng = point.Longitude;
        AddressList.Add(MapAddress);
    }
   string jsonString = JsonSerializer<List<ProgramAddresses>>(AddressList);
   ScriptManager.RegisterArrayDeclaration(Page, "markers", jsonString);
   ScriptManager.RegisterStartupScript(Page, Page.GetType(), Guid.NewGuid().ToString(), "GoogleMap();", true);
   }
   catch (Exception ex)
   {
   }
}

I have created a "GoogleMap()" method at the client-side to plot the location on the Google map.

Add the following script to the aspx page:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD4IuRFVcMjWo1qWvBrS3v4uvDXcCiq_c4&sensor=false">

The following is the Client-side GoogleMap() method functionality. In this JavaScript method, I used the jsonString to fetch the value that I registered in the pervious step. Going through the loop on the JsonString and plotting each location on the Google map.

$(document).ready(function () {

function GoogleMap() {
            var mapOptions = {
            center: new google.maps.LatLng(markers[0][0].lat, markers[0][0].lng),
            zoom: 2,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var infoWindow = new google.maps.InfoWindow();
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        for (i = 0; i < markers[0].length; i++) {
            var data = markers[0][i];
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(data.lat, data.lng),
                map: map
            });
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent(data.description);
                    infoWindow.open(map, marker);
                });
            })(marker, data);
        }
    }
}

The aspx page code is as follows:

<div id="map_canvas" style="border-top: none; width: 100%; margin-top: -1px; height: 250px; background-color: #FAFAFA; margin-top: 0px;">
</div>

The application displays the output like this: