把谷歌地圖放到工具提示中

我有一個顯示數據庫中數據的頁面。我使用jQuery，PHP和mysqli來顯示數據。當您將鼠標懸停在每個記錄的某個鏈接上時，我想要一個工具提示，其中會顯示一個谷歌地圖，根據數據庫中該記錄的lat和lng顯示該記錄的位置。我正在使用jQuery UI工具提示。把谷歌地圖放到工具提示中

但是，如何將googlemap轉換爲工具提示？

<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>

來源

2013-04-16 LauraNMS

該解決方案必須是跨瀏覽器，包括IE的東西。 – LauraNMS

我在使用Google Static Maps API過去做到了這一點。我們有跨度的負載看起來像這樣：

<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" 
    }); 
});

這是使用的jQuery Tooltip plugin。你可以看到這個here的一個工作示例。

來源

2013-04-16 13:57:02 duncan

嗨，鄧肯，這正是我需要的，但我在實施時遇到了問題。我複製了一些代碼並放入了API密鑰。但沒有任何事情發生。 http://newsinteractive.post-gazette.com/golf/test.html – LauraNMS

我不認爲jQuery UI中的Tooltip與我正在使用的Tooltip相同 – duncan

我認爲你應該能夠替換' bodyHandler'屬性與'content'，並提供你有其他[依賴]（http://api.jqueryui.com/tooltip/）它應該工作 – duncan

把谷歌地圖放到工具提示中

回答

相關問題