I have a page that displays data from a database. I'm using jquery, php and mysqli to display the data. When you mouse over a certain link for each record, I want a tooltip to appear with a google map inside it, showing the location of that record based on the lat and lng from that record in the database. I'm using the jquery ui tooltip.
How do you get a googlemap into a tooltip, though, please?
<script type="text/javascript">
$(function() {
$( document ).tooltip({
});
});
$(window).load(function () {
$.get('process.php', function(data){
$('.loading').hide();
$('#chart').html( data );
});
});
process.php:
<?php
include_once ('./myfile.php');
//open database
$db = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME); //open db conn
if (mysqli_connect_errno()) {
printf("Connect failed: %s", mysqli_connect_error());
exit();
}
$infoboxText = "";
//get list of each muni with its lat and lng
$qGolf="SELECT * FROM golf";
$result_golf = $db->query($qGolf);
$infoboxText= "<table class='infoboxWindow'><tr><th>Course Name</th><th>Location</th><th>Phone</th><th>Holes</th><th>Daily Fee<br/>9 Holes</th><th>Daily Fee<br/>18 Holes</th><th>Weekend Fee<br/>9 Holes</th><th>Weekend Fee<br/>18 Holes</th><th>Cart Fee<br/>9 Holes</th><th>Cart Fee<br/>18 Holes</th><th>Tee Times</th></tr>";
while($golfList = $result_golf->fetch_array(MYSQLI_ASSOC)) {
//build the infobox text with a table to hold the data
$infoboxText.="<tr><td>" .$golfList["Course_Name"] . "</td>";
//$infoboxText.="<td><div title='This is a tooltip.' class='locate'>Show</div></td>";
$infoboxText.="<td><a href='#' title='This is a tooltip.' class='locate'>Show</a></td>";
$infoboxText.="<td>".$golfList["Phone"]."</td>";
$infoboxText.="<td>".$golfList["Holes"]."</td>";
$infoboxText.="<td>".$golfList["Daily_Fee_9_Holes"]."</td>";
$infoboxText.="<td>".$golfList["Daily_Fee_18_Holes"]."</td>";
$infoboxText.="<td>".$golfList["Weekend_Fee_9_Holes"]."</td>";
$infoboxText.="<td>".$golfList["Weekend_Fee_18_Holes"]."</td>";
$infoboxText.="<td>".$golfList["Cart_Fee_9_Holes"]."</td>";
$infoboxText.="<td>".$golfList["Cart_Fee_18_Holes"]."</td>";
$infoboxText.="<td>".$golfList["Tee_Times"]."</td></tr>";
//close the table
}
$infoboxText.="</table>";
echo $infoboxText; //return the circles code here
?>
html:
<div class="loading">LOADING ...</div>
<div id="chart"> </div>