1

I am using http://piotrgisworks.blogspot.com/2014/01/google-fusion-table-and-data_17.html to base my new google map off of. I need a tabbed info window. Right now I can't even get the pop up to work. Any suggestions?

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>TabedInfoWindow for Google Fusion Table Layer Map</title> 
<link type="text/css"       href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>   
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link type="text/css" href="default.css" rel="stylesheet" media="all" />

<script type="text/javascript"> //Fisrt script to query Table and get data 
var FT_TableID = '1ASZzkzPNy91QzP8mNiqqLuC9WEnDag6K-UYsFIPf';// Fusion Table     data ID
google.load('visualization', '1', {'packages':['corechart', 'table',  'geomap']});

function  createSidebar() { //This line is important, change Table ID and column names
 var queryText = encodeURIComponent("SELECT 'Restaurant' FROM  "+'1ASZzkzPNy91QzP8mNiqqLuC9WEnDag6K-UYsFIPf');
  var query = new  google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  +  queryText);

 query.send(getData);//set the callback function

  }

google.setOnLoadCallback(createSidebar);// Set a callback to run when the  Google Visualization API is loaded.
</script>
<script type="text/javascript"> //Second sript to create sidebar
var geocoder= new google.maps.Geocoder();
var FTresponse = null;

function getData(response) { //define callback function, this is called when  the results are returned
if (!response) {
alert('no response');
return;
}
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +    response.getDetailedMessage());
return; 
} 
FTresponse = response;
numRows = response.getDataTable().getNumberOfRows();
numCols = response.getDataTable().getNumberOfColumns();


fusiontabledata = "<table><tr>";//concatenate the results into a string, you  can build a table here
fusiontabledata += "<th>" + response.getDataTable().getColumnLabel(0) + "    </th>";
 fusiontabledata += "</tr><tr>";

 for(i = 0; i < numRows; i++) {
 //    for(j = 0; j < numCols; j++) {
  fusiontabledata += "<td><a  href='javascript:myFTclick("+i+")'>"+response.getDataTable().getValue(i, 0) + "  </a></td>";
  //    }
  fusiontabledata += "</tr><tr>";
   }
  fusiontabledata += "</table>"  
  //display the results on the page
  document.getElementById('sidebar').innerHTML = fusiontabledata;
  }

  function openInfoWindowGeocoded(address, name, focusArea, contact,    contactAlt){
  if (geocoder) {
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
      map.setCenter(results[0].geometry.location);
      openInfoWindow(results[0].geometry.location, name, focusArea, contact,  contactAlt, address);

      } else {
        alert("No results found");
      }
    } else {
      alert("Geocode was not successful for the following reason: " +     status);
    }
   });
  }
  }
 {

 }
function myFTclick(row) {
var Restaurant = FTresponse.getDataTable().getValue(row,0);
var Latitude = FTresponse.getDataTable().getValue(row,0);
var Brew = FTresponse.getDataTable().getValue(row,0);
var Charity = FTresponse.getDataTable().getValue(row,0);
var latlng =  FTresponse.getDataTable().getValue(row,1);
if (latlng.indexOf("<") == -1) {
 var coords = latlng.split(',');
 var lat = parseFloat(coords[0]);
 var lng = parseFloat(coords[1]);
 if (isNaN(lat) || isNaN(lng)) {
   // assume address, send to geocoder
   openInfoWindowGeocoded(Longitude, Latitude);
 }
 var position = new google.maps.LatLng(lat,lng);
 }
}

function addClickHandler(FTLayer) {
google.maps.event.addListener(FTLayer, "click", function() {
if (infoWindow) infoWindow.close();
infoWindow.setOptions({pixelOffset:null, 
                       content:event.infoWindowHtml,
                       position:event.latLng
                      });
infoWindow.open(map);
});
var map = null;
var geocoder = null;
var infoWindow = null;
var query = "";
var info = null;


layer1 = new google.maps.FusionTablesLayer(FT_TableID,     {suppressInfoWindows:true}); //now create a layer of just the markers, change  the Column name
layer1.setQuery("SELECT 'Restaurant' FROM " + FT_TableID);
layer1.setMap(map);
addClickHandler(layer1);

infoWindow = new google.maps.InfoWindow(); 
geocoder = new google.maps.Geocoder();

 }

 </script> 
 <script type="text/javascript">//Next script load map and infowindows 
 var roadAtlasStyles = [
{
  featureType: 'all',
  elementType: 'all',
  stylers: [
    { saturation: -10 }
  ]
 }
 ];
var infowindow;
var map;
var layer;
var tableid = '1ASZzkzPNy91QzP8mNiqqLuC9WEnDag6K-UYsFIPf';
var zoom = 12;
 var latlng = new google.maps.LatLng(39.7392, -104.9903);
 function initialize() {
 map = new google.maps.Map(document.getElementById('map_canvas'), {                     
 center: latlng,
zoom: zoom,
streetViewControl: true,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DEFAULT,
mapTypeIds: [google.maps.MapTypeId.SATELLITE, 'usroadatlas'],
position: google.maps.ControlPosition.TOP_RIGHT},
scrollwheel: true,
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_LEFT} 
});
var styledMapOptions = {
name: "Map"  
};
var usRoadMapType = new google.maps.StyledMapType(
roadAtlasStyles, styledMapOptions);
map.mapTypes.set('usroadatlas', usRoadMapType);
map.setMapTypeId('usroadatlas')
layer = new google.maps.FusionTablesLayer(tableid, {
suppressInfoWindows: true,
map: map
});

// Add a click listener to the layer that creates a new infowindow
// with directions text input
google.maps.event.addListener(layer1, 'click', function(e) {
if(infowindow) infowindow.close();
else infowindow = new google.maps.InfoWindow();
    infowindow.setContent(
'<div class="tabs">' +
'<ul>' +
'<li><a href="#tab-1"><span>Restaurant</span></a></li>' + //tabs names
'<li><a href="#tab-2"><span>Brew</span></a></li>' + //tabs names
'<li><a href="#tab-3"><span>Charity</span></a></li>' + //tabs names
'</ul>' +
'<div id="tab-1">' + //second tab content
'<p><a href="http://' + e.row['Rest. Website'].vaule +'" target="_blank">' +   e.row['Restaurant'].value + '<\/a><\/p>' +
'<p>' + e.row['Address'].value + '</b></p>' +
'<img width="300px" height="300px" src="' + e.row['Restaurant Logo'].value +   '"><\/img></a>' +
 '</div>' +
'<div id="tab-2">' + //firts tab content 
 '<p><a href="http://' + e.row['Brew Website'].vaule +'" target="_blank">' +  e.row['Brew'].value + '<\/a><\/p>' +
 '<p>'+ e.row['About the Brew'].value + '</b></p>' +
'<img width="300px" height="300px" src="' + e.row['Brew Logo'].value + '">  <\/img></a>' +//query from Fusion Table column name is in this case 'photo'                                  
'</div>' +
'<div id="tab-3">' + //third tab content 
'<p><a href="http://' + e.row['Charity Website'].vaule +'" target="_blank">'  + e.row['Charity'].value + '<\/a><\/p>' +
 '<p>'+ e.row['About the Charity'].value + '</b></p>' +
'<img width="300px" height="300px" src="' + e.row['Charity Logo'].value +  '"><\/img></a>' +
'</div>' +
'</div>');
infowindow.setPosition(e.latLng);
infowindow.open(map);
$(".tabs").tabs();
});
infoWindow = new google.maps.InfoWindow(); 
}


</script> 
</head> 
<body onLoad="initialize();"> 
<div id="map_canvas"></div> 
<div id="sidebar"></div>
</body> 
</html> 
  • I think if you debug your source, you will find the issue, e.g., youtube.com/watch?v=VoU__603DZo – fatih_dur Jan 11 '16 at 2:59
  • Thanks, that was the problem. Now, I am getting another error. I have a field from my fusion table with a web address. I am trying to get that field to populate in the pop-up, however it just says undefined when the link is clicked. Any suggestions on getting hyperlinks in fusion tables to work in the pop-up? – rockymountainmaps Feb 4 '16 at 17:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.