Question

Hi I am trying to populate markers on google map and using Json to read latitude and longitude from database.

As a first step all I am trying to do is to see if I am getting any response back. The code is below:

Entities is as follows:

public class Property
{
    public int PropertyId { get; set; }
    ...
    public virtual PropertyAddress PropertyAddress { get; set; }
}

public class PropertyAddress
{
    [Key]
    public int PropertyId { get; set; }
    ...
    public float Latitude { get; set; }
    public float Longitude { get; set; }
}

Json Property Model:

public class JsonProperty
{
    public int PropertyId { get; set; }
    public float Latitude { get; set; }
    public float Longitude { get; set; }
}

Controller:

    public ActionResult Map()
    {
        if (Request.IsAjaxRequest())
        {
            var properties = websiteRepository.FindAllProperties();

            var jsonProperties = from property in properties
                                 select new JsonProperty
                                 {
                                     PropertyId = property.PropertyId,
                                     Latitude = property.PropertyAddress.Latitude,
                                     Longitude = property.PropertyAddress.Longitude
                                 };

            return Json(jsonProperties.ToList());
        }
        else 
        {
            return View();
        }
    }

View:

@section Scripts_footer {
    <!-- Google Map Script -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            var map = new google.maps.Map(document.getElementById("map"), {
                center: new google.maps.LatLng(19.0759837, 72.8776559),
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            $.getJSON("/Search/Map", function (json) {
                alert(json);
            });
        });
    </script>
}

<div id="map" style="width: 500px; height: 300px"></div>

I was expecting an alert message with object object object … not really sure why that is not happening.

Answer 1

Change the return statement in the controller code to:

return Json(jsonProperties.ToList(), JsonRequestBehavior.AllowGet);

Json requests are implicitly blocked for security reasons.