I am currently working on loading a list of coordinates for a Google map from either an XML or JSON file, both of which are hosted in the same directory on my local test server. So far, I have used a hard-coded JSON object to load map coordinates for testing purposes. My main query is: how can I replace that fake/hard-coded JSON with the actual XML/JSON file on my server? Below is the code I am using:
(function() {
// Array to store all 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);
// Hard-coded 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]
});
}
}
})();