javascript - Create links to map markers in map created with Fusion Table -
a map being created like so (also see code @ end of post).
what i'm trying create list of links point markers on map, in order recenter map , display infowindows when links followed.
this question , answer makes though array of markers can't retrieved when map created way, how else make list of links?
function initialize() { google.maps.visualrefresh = true; var ismobile = (navigator.useragent.tolowercase().indexof('android') > -1) || (navigator.useragent.match(/(ipod|iphone|ipad|blackberry|windows phone|iemobile)/)); if (ismobile) { var viewport = document.queryselector("meta[name=viewport]"); viewport.setattribute('content', 'initial-scale=1.0, user-scalable=no'); } var mapdiv = document.getelementbyid('googft-mapcanvas'); mapdiv.style.width = ismobile ? '100%' : '100%'; mapdiv.style.height = ismobile ? '100%' : '500px'; var map = new google.maps.map(mapdiv, { center: new google.maps.latlng(35.81916145578315, -83.53575989454339), zoom: 12, maptypeid: google.maps.maptypeid.roadmap }); map.controls[google.maps.controlposition.right_bottom].push(document.getelementbyid('googft-legend-open')); map.controls[google.maps.controlposition.right_bottom].push(document.getelementbyid('googft-legend')); layer = new google.maps.fusiontableslayer({ map: map, heatmap: { enabled: false }, query: { select: "col18", from: "1p-2dj7mmkzaty_cb8is0nql3ou7_joq5nuil5qfn", where: "" }, options: { styleid: 2, templateid: 2 } }); if (ismobile) { var legend = document.getelementbyid('googft-legend'); var legendopenbutton = document.getelementbyid('googft-legend-open'); var legendclosebutton = document.getelementbyid('googft-legend-close'); legend.style.display = 'none'; legendopenbutton.style.display = 'block'; legendclosebutton.style.display = 'block'; legendopenbutton.onclick = function() { legend.style.display = 'block'; legendopenbutton.style.display = 'none'; } legendclosebutton.onclick = function() { legend.style.display = 'none'; legendopenbutton.style.display = 'block'; } } } google.maps.event.adddomlistener(window, 'load', initialize);
fusiontables map clickable sidebar
uses google visualization api query table sidebar (limits number of entries few hundred)
function createsidebar() { //set query using parameter var querytext = encodeuricomponent("select 'name', 'lat', 'focus area', 'contact', 'contact alt' "+ft_tableid); var query = new google.visualization.query('http://www.google.com/fusiontables/gvizdata?tq=' + querytext); //set callback function query.send(getdata); } // set callback run when google visualization api loaded. google.setonloadcallback(createsidebar); var ftresponse = null; //define callback function, called when results returned function getdata(response) { if (!response) { alert('no response'); return; } if (response.iserror()) { alert('error in query: ' + response.getmessage() + ' ' + response.getdetailedmessage()); return; } ftresponse = response; //for more information on response object, see documentation //http://code.google.com/apis/visualization/documentation/reference.html#queryresponse numrows = response.getdatatable().getnumberofrows(); numcols = response.getdatatable().getnumberofcolumns(); //concatenate results string, can build table here fusiontabledata = "<table><tr>"; fusiontabledata += "<th>" + response.getdatatable().getcolumnlabel(0) + "</th>"; fusiontabledata += "</tr><tr>"; for(i = 0; < numrows; i++) { fusiontabledata += "<td><a href='javascript:myftclick("+i+")'>"+response.getdatatable().getvalue(i, 0) + "</a></td>"; fusiontabledata += "</tr><tr>"; } fusiontabledata += "</table>" //display results on page document.getelementbyid('sidebar').innerhtml = fusiontabledata; } proof of concept fiddle (the infowindow sidebar not same native one)
Comments
Post a Comment