Open Fusion Table Layer info window onchange -
using generated code fusiontableslayer wizard, trying determine how open info window onchange. code below displays marker perfectly, info window open when different selection (state) selected, rather clicking on marker trigger info window. thanks.
followup:
following geocodezip's remarks below, next code works , has given me great start! utilize drop downwards selector rather sidebar links...
new working code
<!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>fusion table markers , sidebar</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> google.load('visualization', '1', {'packages':['table']}); var map; var markers = []; var infowindow = new google.maps.infowindow(); function initialize() { var = new google.maps.latlng(38.24676420846342, -94.82073772499997); map = new google.maps.map(document.getelementbyid('map_canvas'), { center: us, zoom: 4, maptypeid: google.maps.maptypeid.roadmap }); //sidebar contain link map marker - sales part - , rep name var sql = encodeuricomponent("select 'state - sales region', 'representative contact', lat, lon 5555555555 order 'state - sales region'"); var query = new google.visualization.query('http://www.google.com/fusiontables/gvizdata?tq=' + sql); query.send(getdata); } //simple sidebar , info window style function getdata(response) { var dt = response.getdatatable(); var side_html = '<table style="border-collapse: collapse" border="1" \ cellpadding="5"> \ <thead> \ <tr style="background-color:#e0e0e0"> \ <th>area</th> \ <th>name</th> \ </tr> \ </thead> \ <tbody>'; (var = 0; < dt.getnumberofrows(); i++) { var lat = dt.getvalue(i,2); var lng = dt.getvalue(i,3); var area = dt.getvalue(i,0); var pop = dt.getvalue(i,1); var pt = new google.maps.latlng(lat, lng); var html = "<strong>" + area + "</strong><br />" + pop; side_html += '<tr> \ <td><a href="javascript:myclick(' + + ')">' + area + '</a></td> \ <td>' + pop + '</td> \ </tr>'; createmarker(pt, html); } side_html += '</tbody> \ </table>'; document.getelementbyid("side_bar").innerhtml = side_html; } //use simple default marker function createmarker(point,info) { var marker = new google.maps.marker({ position: point, map: map }); markers.push(marker); google.maps.event.addlistener(marker, 'click', function() { infowindow.close(); infowindow.setcontent(info); infowindow.open(map,marker); }); } function myclick(num) { google.maps.event.trigger(markers[num], "click"); map.setcenter(markers[num].getposition()); // map.setzoom(map.getzoom()+2); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width: 900px; height: 600px; position: absolute; left: 10px"></div> <div id="side_bar" style="width: 200px; height: 600px; position: absolute; left: 920px; overflow: auto;"></div> </body> </html>
the way open infowindow on fusiontableslayer default click on it. open external event, 1 alternative create own infowindow. retrieving content querying fusiontable , opening on whatever external stimulus want.
example/proof of concept sidebar
example documentation
google-fusion-tables
No comments:
Post a Comment