Skip to content

Instantly share code, notes, and snippets.

@PiotrKrosniak
Created January 23, 2014 09:31
Show Gist options
  • Select an option

  • Save PiotrKrosniak/8575626 to your computer and use it in GitHub Desktop.

Select an option

Save PiotrKrosniak/8575626 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Fusion Tables Layer Example: Dynamic Info Windows</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>
body {
font-family: Arial, sans-serif;
font-size: 12px;
}
#map-canvas {
height: 450px;
width: 800px;
}
</style>
<script type="text/javascript">
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(29.296435107347698, -29.54822280000008),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'col0',
from: '1PoUAVtdJKOKnJT_ZYkoM7yDpGw-wNJMHXakPeC0'
},
map: map,
//don't use the infowindows of the FTLayer
suppressInfoWindows:true
});
//a custom infowindow
infowindow=new google.maps.InfoWindow();
google.maps.event.addListener(layer, 'click', function(e) {
//call drawVisualization when the infowindow is ready
google.maps.event.addListenerOnce(infowindow,'domready',function(){
});
//create the content for the infowindow
var node=document.createElement('div');
node.innerHTML= '<iframe src="https://www.google.com/fusiontables/embedviz?containerId=googft-gviz-canvas&q=select+col0%2C+col1%2C+col2%2Ccol3+from+1r4egxlD-9QeK-4gBrdtTGQFrhdrBoxNhBwQbWUc+%20WHERE%20Country_Name=%27'+ e.row['Country_Name'].value +'%27+order+by+col1+asc+limit+10&viz=GVIZ&t=COLUMN&uiversion=2&gco_forceIFrame=true&gco_hasLabelsColumn=true&att=true&gco_theme=maximized&width=300&height=150"frameborder="0"; scrolling="no"/>';
infowindow.setOptions({position:e.latLng,content:node,map:map});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" height="100%" width="80%"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment