Php 将谷歌地图放入工具提示

我有一个显示数据库数据的页面。我使用jquery、php和mysqli来显示数据。当您将鼠标悬停在每条记录的某个链接上时，我希望显示一个工具提示，其中包含一个google地图，根据数据库中该记录的lat和lng显示该记录的位置。我正在使用jquery ui工具提示

请问，如何将谷歌地图转换成工具提示

<script type="text/javascript">

$(function() {
    $( document ).tooltip({

    });
  });

$(window).load(function () {
    $.get('process.php', function(data){
            $('.loading').hide();
            $('#chart').html( data );
        });

});

$（函数（）{
$（文档）。工具提示({
});
});
$（窗口）。加载（函数（）{
$.get（'process.php'，函数（数据）{
$（'.loading'）.hide（）；
$（'图表'）.html（数据）；
});
});

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


?>

---

我过去曾使用。我们有一组跨度，如下所示：

<a href="#" class="showMap">
<span class="googlemaps" data-image="http://maps.googleapis.com/maps/api/staticmap?zoom=13&amp;size=400x214&amp;markers=color:green|52.503679,13.448807&amp;sensor=false&amp;key=YOURKEY">Show map</span>
</a>



然后有一些javascript附加到所有这些跨度上，这些跨度采用该数据图像属性并调用其中定义的URL，将该内容作为工具提示加载：

// Capture the data-image attribute and attach tool tips to them
$(document).ready(function() {
    $("span.googlemaps[data-image]").tooltip({
        showURL: false,
        track: true,
        bodyHandler: function() {
            return $("<img/>").attr("src", $(this).attr("data-image"));
        },
        extraClass: "imgTooltip"
    });
});

//捕获数据图像属性并向其附加工具提示
$（文档）.ready（函数（）{
$（“span.googlemaps[数据图像]”）。工具提示({
showURL:false，
轨迹：对，
bodyHandler:function（）{
返回$（”
这是使用。你可以看到一个这样的工作示例。
解决方案必须是跨浏览器工作的，包括IE。嗨，Duncan，这正是我需要的，但我在实现它时遇到了问题。我复制了代码位并输入了API键。但什么都没有发生。我认为jquery UI中的工具提示与我正在使用的一个我认为你应该能够用
内容
替换
bodyHandler
属性，如果你有另一个它应该工作，我让它与你的工具提示一起工作，尽管开发人员警告说它已经很久没有更新了。他说使用jquery ui工具提示，但该插件不支持图像。所以谢谢你！我将使用这个代码！
// Capture the data-image attribute and attach tool tips to them
$(document).ready(function() {
    $("span.googlemaps[data-image]").tooltip({
        showURL: false,
        track: true,
        bodyHandler: function() {
            return $("<img/>").attr("src", $(this).attr("data-image"));
        },
        extraClass: "imgTooltip"
    });
});