Google Map javascript asp.net Ajax

I have the table having following columns
1. officeName 2. latitude 3. longitude

where latitude and longitude are numbers like 40.23568, -8325645

I have placed a google map on the page. The portion of the map which is seen at a time is called the viewport. so I want only those offices which are within the current viewport.

I have got some code from http://code.google.com/apis/maps/documentation/javascript/v2/introduction.html#The_Hello_World_of_Google_Maps

and i am trying the following code to solve the problem:

 var bounds = map.getBounds();
 var southWest = bounds.getSouthWest();
 var northEast = bounds.getNorthEast();
 var lngSpan = northEast.lng() - southWest.lng();
 var latSpan = northEast.lat() - southWest.lat();

so whenever i make a move or zoom in or out the map, the viewport changes and so the respective offices also needs to be shown.

Please help!
Dinesh KumarAsked:
Who is Participating?
 
Dinesh KumarAuthor Commented:
In the Viewport, I have two points like Hypotinues (drawn as  / )

This has two points say (x1, y1) and on the upward side (x2,y2)

So the filtering condition is that longitude lies between x2 and x1 whereas latitude lies between y2 and y1

the aspx page is:

    <div id="ajaxBusy" style="position: absolute; top: 1px; left: 1px; z-index: 9999;
        color: Red; background-color: #ffffff;padding-left:450px;">
        loading offices...
    </div>
    <div class="contact-map" id="map" style="height: 300px">
    </div>
    <div style="float:left;padding-left:250px; color:Red;"><i>--Please move or zoom the Viewport to get the respective Buildings--</i></div>
    <br />
    <p style="padding-top: 10px; padding-left:400px;">
        <b>ViewPort Buildings</b></p>
   
    <div id="MapInfo" style="float:left; width:550px; padding-left:250px;">
    </div>

and add the following script in Head:

  <script src="http://maps.google.com/maps?file=api&v=2.x&sensor=false&key=ABQIAAAAEHnh-dmpMnltiXAxYqriPRSs43Q4t0AFmKdH3Ny4Q9xgN9pv1xRD-7RfJ68ctWfXAzR89AiJrcpRXw"
        type="text/javascript"></script>

Please see the attached file where data is being sent to c# using JSON

the C# code is:

    [System.Web.Services.WebMethod]
        public static clsBuilding[] bindgrd(Double EastLat, Double EastLon, Double WestLat, Double WestLon)
        {
            List<clsBuilding> buildingList = null;
            try
            {
                var building = CloudStorageAccount.Parse(RoleEnvironment.GetConfigurationSettingValue("DataConnectionString"));

                var buildingContext = new clsBuildingDataContext(building.TableEndpoint.ToString(), building.Credentials);
                List<clsBuilding> buildings = buildingContext.Building.ToList();

                buildingList = (from n in buildings                 where Convert.ToDouble(n.Longitude) >= WestLon && Convert.ToDouble(n.Longitude) <= EastLon &&
                                 Convert.ToDouble(n.Latitude) >= WestLat && Convert.ToDouble(n.Latitude) <= EastLat
                                select n).ToList();

                return buildingList.ToArray();
            }
            catch (Exception ex)
            {
                return buildingList.ToArray();
            }      
        }


jsCode.js
0
 
Dinesh KumarAuthor Commented:
if we know a range of the points then I can make a ajax call where I can query the data table to get only those offices which are within the current viewport. But how to get that range is the big question for me!

http://en.googlemaps.subgurim.net/ejemplos/ejemplo_995000_GLatLngBounds.aspx
0
 
BardobraveCommented:
I'm not very sure at this moment, but I think that there's a method on gmap API classes that returns true when a lat/long pair is within current viewport or not.

Check APIs documentation, there should be the answer to your problem

http://code.google.com/intl/en/apis/maps/documentation/javascript/reference.html
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
Dinesh KumarAuthor Commented:
0
 
BardobraveCommented:
Seems like google.maps.LatLngBounds.contains should do the trick for your problem, isn't it?
0
 
Dinesh KumarAuthor Commented:
I am trying with the following code which is called whenever the moveend event gets fire in the map:

 [System.Web.Services.WebMethod]
        public static clsoffice[] bindgrd(Double EastLat, Double EastLon, Double WestLat, Double WestLon)
        {

            var office = CloudStorageAccount.Parse(RoleEnvironment.GetConfigurationSettingValue("DataConnectionString"));

            var officeContext = new clsofficeDataContext(office.TableEndpoint.ToString(), office.Credentials);
            List<clsoffice> offices = officeContext.office.ToList();

            List<clsoffice> officeList = (from n in offices
                                              //where (Convert.ToDouble(n.Latitude) <= EastLat && Convert.ToDouble(n.Latitude) >= WestLat)
                                              select n).ToList();
            DataTable dataTB = ConvertTo(officeList);

            DataView dv = new DataView(dataTB);
            // dv.RowFilter = "Latitude <= '" + Convert.ToString(EastLat) + "' and Latitude >=" + Convert.ToString(WestLat);
            dv.RowFilter = "Latitude <=" + EastLat.ToString(); //39.1645684

            DataTable newDT = dv.ToTable();
            List<clsoffice> list = (List<clsoffice>)ConvertToList<clsoffice>(newDT);
            //List<clsoffice> officeList = (from n in offices
            //                                  where (Convert.ToDouble(n.Longitude) >= EastLon && Convert.ToDouble(n.Longitude) <= WestLon)
            //                                  select n).ToList();

            return list.ToArray();
        }


0
 
Dinesh KumarAuthor Commented:
And the values which i am supplying to this method from aspx page are:

GEvent.addListener(map, "moveend", function () {
 var bounds = map.getBounds();
                    var southWest = bounds.getSouthWest();
                    var northEast = bounds.getNorthEast();

var data = "EastLat: " + northEast.lat() + ", EastLon: " + northEast.lng() + ", WestLat: " + southWest.lat() + ", WestLon: " + southWest.lng();
..................
...........

0
 
BardobraveCommented:
Personally I think it would be easier to pass your lat/long values to client through hidden inputs inside the page and use API's code to directly retrieve true/false when the lat/long pairs are inside/out of the viewport. Any server reload could be made through AJAX.
0
 
Dinesh KumarAuthor Commented:
1. you mean to say that suppose I have 200 offices with their respective latitudes and longitudes then I should pass them one by one to the javascript. it means whenever the viewport changes i need to send all these values to the javascript.
2. what i am currently doing is creating a web method inside the c# calling it whenever the viewport changes the function is called from the provided code using addListener method.

I am confused how I will implement the condion in the code bethind using the following parameters which i am sending

 var data = "EastLat: " + northEast.lat();
+", EastLon: " + northEast.lng() + ", WestLat: " + southWest.lat() + ", WestLon: " + southWest.lng();

becuse in the backend I am having all the offices records.

3. I am thinking over your advice also of using the contains function by  passing lat/long values because i have already worked a lot on my code.

so still working .. on ... it

GEvent.addListener(map, "moveend", function () {
                    var bounds = map.getBounds();
                    var southWest = bounds.getSouthWest();
                    var northEast = bounds.getNorthEast();

                    var hdnnorthEastLat = document.getElementById("<%=hdnnorthEastLat.ClientID %>");
                    hdnnorthEastLat.value = northEast.lat();
                    var hdnnorthEastLon = document.getElementById("<%=hdnnorthEastLon.ClientID %>");
                    hdnnorthEastLon.value = northEast.lng();

                    var hdnsouthWestLat = document.getElementById("<%=hdnsouthWestLat.ClientID %>");
                    hdnsouthWestLat.value = southWest.lat();
                    var hdnsouthWestLon = document.getElementById("<%=hdnsouthWestLon.ClientID %>");
                    hdnsouthWestLon.value = southWest.lng();

                    var data = "EastLat: 40" + ", EastLon: " + northEast.lng() + ", WestLat: " + southWest.lat() + ", WestLon: " + southWest.lng();

                    $.ajax({
                        type: "POST",
                        url: "Default3.aspx/bindgrd",
                        data: "{" + data + "}",
                        contentType: "application/json",
                        dataType: "json",
                        success: function (data) {
                            var html = "";
                            html += "<table border=\"1\" cellspacing=\"0\" cellpadding=\"5\">";
                            html += "<tr>";
                            html += "<td>officeName</td><td>Latitude</td><td>Longitude</td>";
                            html += "</tr>";
                            for (var i = 0; i < data.d.length; i++) {
                                html += "<tr><td>" + data.d[i].officeName+ "</td>";
                                html += "<td>" + data.d[i].Latitude + "</td>";
                                html += "<td>" + data.d[i].Longitude + "</td></tr>";
                            }

                            html += "</table>";
                            
                            $("#<%=MapInfo.ClientID %>").html(html);
                        }
                    })
                });

Open in new window

0
 
Dinesh KumarAuthor Commented:
0
 
BardobraveCommented:
1. you mean to say that suppose I have 200 offices with their respective latitudes and longitudes then I should pass them one by one to the javascript. it means whenever the viewport changes i need to send all these values to the javascript.

Not really. You can use a JSON object to pass the whole list of offices to client code. When the viewport changes you don't need to pass again that object, as the client code already has it, you only need to pass to your function the coordinates of the new viewport.
0
 
Dinesh KumarAuthor Commented:
Can you please confirm me the coordinates of the new viewport.?
0
 
BardobraveCommented:
I assume that when you move you viewport from one point to another it's main class coordinates are automatically updated by the event.
0
 
Dinesh KumarAuthor Commented:
main class coordinates?
0
 
BardobraveCommented:
Yes... you should have a map loaded. This map is referenced through API's map class, this class has a method getBounds that returns you a LatLngBounds object with the boundaries of the current viewport, so when you drag over the map, this method getBounds will return you the current NE-SW corners of the viewport.

LatLngBounds object has the contains method, wich returns you true or false if any lat/long pair you pass it as param is within it's boundaries.

So everytime you can get the boundaries of your current viewport through your map's main class, and the boundaries object has a direct method to know if your points are within it.
0
 
Dinesh KumarAuthor Commented:
Thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.