Google Map with JSON

• Download demo project - 159.1 KB

Introduction

Most of us are familiar with Google map. Google has provided very rich APIs to use in our own application. I was using an ASP.NET Google Maps User Control name GoogleMaps.Subgurim.NET for my marker and polygon drawing for a long time. It is an excellent tool indeed. Please check the below mentioned link for more details:

• http://en.googlemaps.subgurim.net/

I needed some more functionality which could be easily done by Google Map API. But when I was searching for an example, most of the examples were based on JavaScript but I needed server side functionality because my latitude & longitude and description data would come from database and definitely I needed some searching functionality. In this tip, I would like to show you how you can achieve this functionality with json.

Please check the below mentioned link for more details about json:

• http://www.codeproject.com/Articles/779303/JSON-and-Microsoft-technologies

Background

I assume you have a basic knowledge of ASP.NET and C#.NET, and so on.

Using the Code

Within the head section of an HTML document, include this script reference to the Google Maps API; the key should be changed if you need to upload this HTML into a web server.

	<script type='text/javascript'
src='http://maps.googleapis.com/maps/api/js?sensor=false'></script>

Then add:

<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

Now add the main JavaScript function to get data from server side and draw map with marker:

var map;

function CreateMarker() {
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "Default.aspx/BindMapMarker",
        data: "{}",
        dataType: "json",
        success: function (data) {
            var myOptions = {
                center: new google.maps.LatLng(data.d[0].Latitude, data.d[0].Longitude),
                zoom: 14,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("idgoogleMap"), myOptions);

            var ltlng = [];

            for (var i = 0; i <= data.d.length; i++) {

                ltlng.push(new google.maps.LatLng(data.d[i].Latitude, data.d[i].Longitude));

                marker = new google.maps.Marker({
                    map: map,
                    animation: google.maps.Animation.DROP,
                    icon: '3.png',
                    title: data.d[i].LocationName,
                    position: ltlng[i]
                });


                (function (marker, i) {

                    google.maps.event.addListener(marker, 'click', function () {

                        infowindow = new google.maps.InfoWindow({ maxWidth: 250 });
                        infowindow.setContent(data.d[i].LocationName);
                        infowindow.open(map, marker);

                    });

                })(marker, i);
            }
        },
        error: function (result) {
            alert("Error");
        }
    });
};

//google.maps.event.addDomListener(window, 'load', CreateMarker());

Now add server side code.

[WebMethod]
  public static MAPS[] BindMapMarker()
  {
      DataSet ds = new DataSet();
      DataTable dt = new DataTable();
      List<maps> lstMarkers = new List<maps>();
      try
      {

          dt.Columns.Add("LocationName");
          dt.Columns.Add("Latitude");
          dt.Columns.Add("Longitude");

          dt.Rows.Add("LocationName 1", "23.722449", "90.401508");
          dt.Rows.Add("LocationName 2", "23.715667", "90.384295");
          dt.Rows.Add("LocationName 3", "23.723928", "90.405924");
          dt.Rows.Add("LocationName 4", "23.716426", "90.395794");
          dt.Rows.Add("LocationName 5", "23.721985", "90.399379");

          foreach (DataRow dtrow in dt.Rows)
          {
              MAPS objMAPS = new MAPS();
              objMAPS.LocationName = dtrow[0].ToString();
              objMAPS.Latitude = dtrow[1].ToString();
              objMAPS.Longitude = dtrow[2].ToString();
              lstMarkers.Add(objMAPS);
          }
      }
      catch (Exception ex)
      {
          throw ex;
      }

      return lstMarkers.ToArray();
  }

  public class MAPS
  {
      public string LocationName;
      public string Latitude;
      public string Longitude;
  }

Analysis of Client Side Code

jQuery allows you to call Server Side ASP.NET methods from client side without any PostBack. Actually it is an AJAX call to the server but it allows to call the method or function from server side.

Then I have added some option in map object. Here data is an object return from server side function BindMapMarker().

Now Load Data in marker object.

Add Click event functionality in marker object.

Analysis of Server Side Code

This code calls JavaScript function CreateMarker() when page is loading.

if (!ClientScript.IsStartupScriptRegistered("window"))
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), "window", "CreateMarker();", true);
}

An important thing to note is that the method is declared as static (C#) and also it is declared as Web Method unless you do this you won’t be able to call the methods. Rest of the code is self explanatory. For the sake of simplicity, I have used dataset with fixed value. Just populate the dataset with your SQL value and you are ready to go.

[WebMethod]
  public static MAPS[] BindMapMarker()
  {
      DataSet ds = new DataSet();
      DataTable dt = new DataTable();
      List<maps> lstMarkers = new List<maps>();
      try
      {
          dt.Columns.Add("LocationName");
          dt.Columns.Add("Latitude");
          dt.Columns.Add("Longitude");

          dt.Rows.Add("LocationName 1", "23.722449", "90.401508");
          dt.Rows.Add("LocationName 2", "23.715667", "90.384295");
          dt.Rows.Add("LocationName 3", "23.723928", "90.405924");
          dt.Rows.Add("LocationName 4", "23.716426", "90.395794");
          dt.Rows.Add("LocationName 5", "23.721985", "90.399379");

          foreach (DataRow dtrow in dt.Rows)
          {
              MAPS objMAPS = new MAPS();
              objMAPS.LocationName = dtrow[0].ToString();
              objMAPS.Latitude = dtrow[1].ToString();
              objMAPS.Longitude = dtrow[2].ToString();
              lstMarkers.Add(objMAPS);
          }
      }
      catch (Exception ex)
      {
          throw ex;
      }

      return lstMarkers.ToArray();
  }

  public class MAPS
  {
      public string LocationName;
      public string Latitude;
      public string Longitude;
  }

References

• Using jQuery to directly call ASP.NET AJAX page methods
• Using jQuery to Consume ASP.NET JSON Web Services
• MSDN article from 2007 on Web Services and Page Methods.

Credit

I would like to give credit to my colleague khandaker Waliur Rahman <waliur.rahman@icddrb.org> for his contribution.

Conclusion

In this way, we can also add circle and polygon in Google map.

History

• 11^th March, 2015: Initial version