从本地服务器上的文件中读取XML或JSON

Question

I'm trying to load a list of coordinates for use in a google map from either an XML file or a JSON file (I have both hosted in same directory on local test server). I have used a hard-coded JSON object to load map coordinates to test so far. My question is, how do I replace that fake/hard-coded JSON with the XML/JSON file on my server? Here's my code:

  (function() {

  // Creating an array that will contain all of our product icons
  var productIcons = [];

  productIcons['bulletin'] = new google.maps.MarkerImage(
    'icons/Bulletin-sm.png', 
    new google.maps.Size(48, 48), 
    null, 
    new google.maps.Point(24, 24)
  );

  productIcons['bus'] = new google.maps.MarkerImage(
    'icons/busicon.png', 
    new google.maps.Size(48, 48), 
    null, 
    new google.maps.Point(24, 24)
  );

  productIcons['bench'] = new google.maps.MarkerImage(
    'icons/BusBench-sm.png', 
    new google.maps.Size(48, 48), 
    null, 
    new google.maps.Point(24, 24)
  );

  productIcons['junior'] = new google.maps.MarkerImage(
    'icons/JuniorPoster-sm.png', 
    new google.maps.Size(48, 48), 
    null, 
    new google.maps.Point(24, 24)
  );

  productIcons['poster'] = new google.maps.MarkerImage(
    'icons/Poster-sm.png', 
    new google.maps.Size(48, 48), 
    null, 
    new google.maps.Point(24, 24)
  );


  productIcons['shelter'] = new google.maps.MarkerImage(
    'icons/TransitShelter-sm.png', 
    new google.maps.Size(48, 48), 
    null, 
    new google.maps.Point(24, 24)
  );

  window.onload = function() {

    // Creating a map
    var options = {  
      zoom: 3,  
      center: new google.maps.LatLng(37.09, -95.71),  
      mapTypeId: google.maps.MapTypeId.ROADMAP  
    };  
    var map = new google.maps.Map(document.getElementById('map'), options);  


// Creating a JSON object with fake product data (to be replaced by XML or JSON)
var productData = {'product': [
{
'lat': 40.756054,
'lng': -119.986951,
'productType': 'junior'
},
{
'lat': 35.620973,
'lng': -121.347276,
'productType': 'shelter'
},
{
'lat': 40.620973,
'lng': -121.347276,
'productType': 'bus'
},
{
'lat': 39.120973,
'lng': -122.847276,
'productType': 'bench'
},
{
'lat': 35.920973,
'lng': -122.347276,
'productType': 'bulletin'
},
{
'lat': 37.775206,
'lng': -122.419209,
'productType': 'poster'
}
]};
// Looping through the product array in productData
for (var i = 0; i < productData.product.length; i++) {
// creating a variable that will hold the current product object
var product = productData.product[i];
// Creating marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(product.lat, product.lng),
map: map,
icon: productIcons[product.productType]
});

}
}
})();

Answer 1

I'm thinking you could possibly setup a RESTFUL web service on your server and then use jquery's ajax capability to fetch the JSON content off from it.

A ajax tutorial: Ajax tutorial for post and get

As for the RESTFUL web service side, there are many technologies which you can explore. Just search for "java restful web service tutorial" or ".NET WCF RESTFUL"