размещение карты google в подсказке

Question

У меня есть страница, которая отображает данные из базы данных. Я использую jquery, php и mysqli для отображения данных. Когда вы наводите указатель мыши на определенную ссылку для каждой записи, я хочу, чтобы всплывающая подсказка отображалась с ее картой google, отображающей местоположение этой записи на основе 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> 

Answer 1

Я делал это в прошлом, используя 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.