The idea is to have a map and sortable table of locations on the same page. When the user clicks "Map it" he opens the infowindow on the map at the corresponding location. The primary key field from the MySQL database is UniqueID.
I fee like I'm close, but my newness to JavaScript has me missing something basic. I'm still developing it on my local machine, so I don't have a link yet. But if you can spot my mistake in the code, I'd appreciate it. Thanks for taking a look, Dan <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"; xmlns:v="urn:schemas- microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/ > <title>courier-journal.com/gas</title> <script type="text/javascript" src="http://maps.google.com/maps? file=api&v=2&key=ABQIAAAAR0TWf73rulOP_SnETQPFKxRj5djmSsmVAgDaRb1psFcJlThRhxSjxifqM96NjrBsBn2XrZWSE- QQqQ"></script> <script src="mapiconmaker.js" type="text/javascript"></script> <script type="text/javascript" src="jquery-latest.js"></script> <script type="text/javascript" src="jquery.tablesorter.js"></script> <script type="text/javascript"> //<![CDATA[ var gmarkers = []; function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl());"<b>$" + map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(38.23,-85.63), 10); GDownloadUrl("mapxml.php", function(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName ("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("Regular"); var address = markers[i].getAttribute("Address"); var station = markers[i].getAttribute("Station"); var point = new GLatLng(parseFloat(markers[i].getAttribute ("lat")), parseFloat(markers[i].getAttribute ("lng"))); var UniqueID = markers[i].getAttribute("UniqueID"); var marker = createMarker(point, name, address, station, UniqueID); gmarkers[i] = marker; map.addOverlay(marker); } }); } } function createMarker(point, name, address, station, UniqueID) { var iconOptions = {}; iconOptions.width = 40; iconOptions.height = 20; iconOptions.primaryColor = "#082C3C"; iconOptions.label = "$" + name; iconOptions.labelSize = 0; iconOptions.labelColor = "#E5E7B5"; iconOptions.shape = "roundrect"; var icon = MapIconMaker.createFlatIcon(iconOptions); var marker = new GMarker(point, {icon: icon}); var html = "<div class=bubble> <b>$" + name + "</b> <br/>" + address + "<br/>" + station + "<br/>" + UniqueID; GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } $(document).ready(function() { $("#table").tablesorter( {sortList: [[5,1]]} ); } ); // Opens info window when click on link in table function myclick(i) { GEvent.trigger(gmarkers[UniqueID], "click"); } </script> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 100%; height: 375px"></div> <style type="text/css"> div.bubble { font-family:arial; font-size: 9pt; text-align: left; } table.tablesorter { font-family:arial; background-color: #CDCDCD; margin:10px 0pt 15px; font-size: 8pt; width: 100%; text-align: left; } table.tablesorter thead tr th, table.tablesorter tfoot tr th { background-color: #E1E8C4; border: 1px solid #FFF; font-size: 8pt; padding: 4px; } table.tablesorter thead tr .header { background-image: url(img/bg.gif); background-repeat: no-repeat; background-position: center right; cursor: pointer; } table.tablesorter tbody td { color: #082C3C; padding: 4px; background-color: #FFF; vertical-align: top; } table.tablesorter tbody tr.odd td { background-color:#F0F0F6; } table.tablesorter thead tr .headerSortUp { background-image: url(img/asc.gif); } table.tablesorter thead tr .headerSortDown { background-image: url(img/desc.gif); } table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp { background-color: #BBC89C; } </style> </head> <?php include ("gasconnect.php"); $query = 'SELECT Regular, Address, Station, ZIP, Poster, Date FROM gas WHERE Date > DATE_SUB(CURDATE(), INTERVAL 1 DAY)'; $result = mysql_query($query); echo "<table id='table' class='tablesorter' cellspacing='1'> <thead> <tr><th><b>Regular</th><th>Address</th><th>Station</th><th>ZIP</ th><th>Poster</th><th>Date</th>"; echo "</tr></thead>"; echo "<tbody>"; while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) { printf(" <tr> <td>$%s</td> <td>%s</td> <td>%s</td> <td>%s</td> <td>%s</td> <td>%s</td> <td><a href='#top' onClick='myclick(i)'>Map It</a> </td> </tr>", $row["Regular"], $row["Address"], $row["Station"], $row["ZIP"], $row["Poster"], date("M j h:i A", strtotime($row["Date"]))); } echo "</tbody> </table> "; ?> </html> </code> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Google Maps API" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/Google-Maps-API?hl=en -~----------~----~----~----~------~----~------~--~---
