Question

I have a newbie question.
If in my asp.net application I need to query the database and get a set of Google markers to display on the map. I’m new to web development, so I’m not sure how the data can be passed from asp.net to JavaScript. Is it done with a WebService called from the JavaScript or is there another way to do it ? I’m probably misunderstanding some major concepts. As well, is there a way to pass data from JavaScript to asp.net application (e.g. something was don on the Google map and the data should be stored to the database on the back-end). If this is too basic, any links will be appreciated. Thanks !

Answer 1

Well, this is how I would do it (FYI, this relies heavily on the JQuery javascript library):

1. Declare your <div> where your map will be displayed.
2. use a $(document).ready() handler to wait until the DOM is loaded to start your request
3. Use an asynchronous JQuery $.ajax call to a WCF or ASMX web service that returns JSON representing your marker data.

Here is a rough cut at some code:

... your web page

<script>
$(document.)ready(function() {

$.ajax(

 url: "mapquery.asmx",
 async: true,
 dataType: json,
 success: function(data)
 {
    var map = new GMap2(document.getElementById("map_div"));
    for (int i = 0; i < data.length; i++)
    {
       var point = new GLatLng(data.results[i].lat,
                               data.results[i].lng);
       var marker = createMarker(point, data.results[i].desc, 
                                 data.results[i].type);
       map.addOverlay(marker);
    }
 }
);

});
</script>

example json returned from mapquery.asmx:

results = [ {
      lat: 41.765,
      lng: 80.572
      desc: "My house",
      type: "X"
   },
   {
      lat: 42.765,
      lng: 81.572
      desc: "Friend's house",
      type: "X"
   }
]