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: