I'm struggling to populate Google InfoWindows with dynamic content. My current approach involves loading 60 markers and attaching a click event handler to each one. Upon clicking a marker, I aim to retrieve the corresponding data from a fusion table based on a unique ID column. Each marker should display different data in its respective InfoWindow. Despite reading about closures, I'm having trouble applying this concept effectively to this problem - any suggestions would be appreciated.
var markers = new Array();
infoWindow = new google.maps.InfoWindow();
function getBeachLocations() {
// construct query
var queryURL = "https://www.googleapis.com/fusiontables/v1/query?sql=";
var queryTail = "&key=apiKey=?";
var query = "SELECT * FROM beachLocationTable"; // beach locations tbl
var queryText = encodeURI(query);
$.ajax({
type: "GET",
url: queryURL + queryText + queryTail,
cache: false,
dataType: 'jsonp',
success: createMarkers,
error: function () {
alert("Sorry, no spatial data is available at this time, please check back on a later date.");
}
});
} //end getBeachLocations
function createMarkers(data) {
// code for creating markers
}
function getEcoliData(beach_id) {
// code for fetching E.coli data
}
function createDropDownMenu() {
// code for creating dropdown menu
}
/* start map initialization */
function initialize() {
// code for initializing the map
}
// invocation starts here
createDropDownMenu();
getBeachLocations();