Question

   $(document).ready(function ()
    {
        $(".viewmap").click(function ()
        {
            var id = $(this).attr("id");
            var responseURL = "~/changemap?id=" + id;
            //alert(responseURL);
            $.ajax(
            {
                url: responseURL,
                dataType: "json",
                type:"GET",
                success: function (dt)
                {
                    initialize(dt.Latt, dt.Longt); 
                }
            }
            );
        }
        );
    });

I use that script to make an ajax call to the page changemap.cshtml which does the following

@{

    if(!IsPost)
    {
        if(!Request.QueryString["id"].IsEmpty()&&Request.QueryString["id"].IsInt())
        {
            var countryId=Request.QueryString["id"];
            var db=Database.Open("GoogleMapView");
            var dbCmd="SELECT * FROM places WHERE id=@0";
            var row=db.QuerySingle(dbCmd,countryId);
            if(null!=row)
            {
               Json.Write(row,Response.Output);
            }
        }
    }
}

That is to return the queried data from the database in json format to the client. The Initialize function is defined as

function initialize(lat,lng)
            {
                var mapOptions = {
                    center: new google.maps.LatLng(lat,lng),zoom: 8,mapTypeId: google.maps.MapTypeId.ROADMAP 
                };
                var map = new google.maps.Map(document.getElementById("gmap"),mapOptions);
            }

But when I click the div tag of class viewmap, nothing happens. I think I miss some more script to get my application to work correctly.

I only try to implement a simple google map view in which once the user clicks a place name as a hyperlink will reload the map that matches with it.

Answer 1

I think

var responseURL = "~/changemap?id=" + id;

should be

var responseURL = '@(Url.Content("~/changemap")+"?id=")' + id;