Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Vmix > Fusion Table tutorial 6
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
#map-canvas {
height: 610px;
width: 620px;
<script type="text/javascript" src=""></script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(42.47, -92.28964058465579),
zoom: 14,
mapTypeId: google.maps.MapTypeId.SATELLITE,
minZoom: 10
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'lat, long',
from: '1ogJFVYzLhAnzNVOCRQsxKlzOshGpBL9Tgv-WPOw'
map: map
// This is the click event that will trigger the infowindow
google.maps.event.addListener(layer, 'click', function(e) {
// Change the content of the InfoWindow
e.infoWindowHtml = "<div style='width: 350px'>"
e.infoWindowHtml += "<div style='font-size: 16px;'><strong>" + e.row['time'].value + "</strong></div><br>";
// We have column in our Fusion Table called video
// If there is a video with the infowindow, we have embed code in this 'video' column
// Otherwise we have an image with the infowindow and a "O" in the video column
// We'll run this loop and see if there is an image or a video with the infowindow
// And display either
if (e.row['video'].value === "0") {
e.infoWindowHtml += "<img src='" + e.row['image_url'].value + "' style='width:350px' /><br>";
} else {
e.infoWindowHtml += e.row['video'].value + "<br>";
e.infoWindowHtml += "<strong>" + e.row['location'].value + "</strong><br>";
e.infoWindowHtml += "<hr>";
e.infoWindowHtml += e.row['info'].value + "<br>";
e.infoWindowHtml += "</div>";
google.maps.event.addDomListener(window, 'load', initialize);
<div id="map-canvas"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.