I'm trying to create a Google Map that loads map data from a Fusion Table, with custom map markers, based on the solution shown here: http://code.google.com/p/fusion-tables/issues/detail?id=69#c107
My version of this code is working to display the map, and it also seems like the json data request from the Fusion Table is successful, but no markers are displaying on the map.
Can someone suggest what I'm doing wrong?
Page is here: http://clorentzen.com/queensbrewery/fusiontable.html
Thanks!
More info: The table: https://www.google.com/fusiontables/DataSource?docid=1coED7p2uvV31pMNMPhHsrPRxZCfZv4b9LvkvrCc
The code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Fusion Table version of QB on draft info</title>
<style>
body {
font-family: Arial, sans-serif;
font-size: 12px;
}
#map-canvas {
height: 500px;
width: 600px;
}
</style>
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type="text/javascript">
var map;
var infoWindow = new google.maps.InfoWindow();
var DEFAULT_ICON_URL = 'http://clorentzen.com/queensbrewery/qb_maps.png';
// EDIT: change this key to your own from the Google APIs Console
// https://code.google.com/apis/console/
var apiKey = 'AIzaSyAlluI5j2piL1x7OK8dOiZRreO3L6VCZSQ';
// EDIT: Specify the table with location data and icon URLs
var tableID = '1coED7p2uvV31pMNMPhHsrPRxZCfZv4b9LvkvrCc';
// Create variables for the columns you need to retrieve from the table
// EDIT this list as needed, then find and edit two places below.
var latitudeColumn = 'LATITUDE';
var longitudeColumn = 'LONGITUDE';
var iconUrlColumn = 'ICON';
var venueColumn = 'BAR';
var addressColumn = 'ADDRESS';
var neighborhoodColumn = 'NEIGHBORHOOD';
var regionColumn = 'REGION';
function createMarker (coordinate, url, content) {
var marker = new google.maps.Marker({
map: map,
position: coordinate,
icon: new google.maps.MarkerImage(url)
});
google.maps.event.addListener(marker, 'click', function(event) {
infoWindow.setPosition(coordinate);
infoWindow.setContent(content);
infoWindow.open(map);
});
};
function fetchData() {
// Construct a query to get data from the Fusion Table
// EDIT this list to include the variables for columns named above
var query = 'SELECT '
+ latitudeColumn + ','
+ longitudeColumn + ','
+ iconUrlColumn + ','
+ venueColumn + ','
+ addressColumn + ','
+ neighborhoodColumn + ','
+ regionColumn + ' FROM '
+ tableID;
var encodedQuery = encodeURIComponent(query);
// Construct the URL
var url = ['https://www.googleapis.com/fusiontables/v1/query'];
url.push('?sql=' + encodedQuery);
url.push('&key=' + apiKey);
url.push('&callback=?');
// Send the JSONP request using jQuery
$.ajax({
url: url.join(''),
dataType: 'jsonp',
success: onDataFetched
});
}
function onDataFetched(data) {
var rows = data['rows'];
var iconUrl;
var content;
var coordinate;
// Copy each row of data from the response into variables.
// Each column is present in the order listed in the query.
// Starting from 0.
// EDIT this if you've changed the columns, above.
for (var i in rows) {
coordinate = new google.maps.LatLng(rows[i][0],rows[i][1]);
iconUrl = rows[i][2];
content = "<strong>" + rows[i][3] + "</strong><br>" + rows[i][4] + "<br>" + rows[i][5] + ", " + rows[i][6] + "<br>";
if (iconUrl) { // ensure not empty
createMarker(coordinate, iconUrl, content);
} else {
createMarker(coordinate, DEFAULT_ICON_URL, content);
}
}
}
function initialize() {
fetchData(); // begin retrieving data from table, and put it on the map
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(40.7,-73.8),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
