ASP.NET and JavaScript (GoogleMaps markers to JavaScript)

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 !

Mike Marshall · Accepted Answer · 2011-06-27T20:52:29.703

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

Declare your <div> where your map will be displayed.
use a $(document).ready() handler to wait until the DOM is loaded to start your request
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"
   }
]

Thank you! Is this (WebService/WCF) a preferable way of JavaScript getting data from the asp.net ? Are there any other ways (just using a webmethod) ? — mishap, Jun 28 '11 at 17:38
Keep your eye out for the new WCF Web API (http://wcf.codeplex.com/wikipage?title=WCF%20HTTP). Sounds like this will be the preferred method moving forward, but you can also use plain old ASHX handler files and return hand-crafted JSON, or use the existing WCF support (see here: http://stackoverflow.com/questions/2086666/wcf-how-do-i-return-clean-json) — Mike Marshall, Jun 28 '11 at 18:45

score 0 · Answer 2 · answered Jun 27 '11 at 20:26

You can use something like below:

function load() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map_canvas"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(43.104135, -77.884455), 6);
    // Change this depending on the name of your PHP file
    GDownloadUrl("generateXML.aspx", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");       
          for (var i = 0; i < markers.length; i++) {
            var desc = htmlEntities(markers[i].getAttribute("desc"));   
            var type = markers[i].getAttribute("type");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, desc, type);
            map.addOverlay(marker);
          }
    });
}

In generateXML.aspx, send an XML response and it should work like charm.

ASP.NET and JavaScript (GoogleMaps markers to JavaScript)

2 Answers2