谷歌地圖燈箱

我有一張地圖的圖像到我的辦公室，我想在我的網站上使用，但我希望在那裏有用戶點擊圖片拉起谷歌地圖位置的選項一個燈箱....谷歌地圖燈箱

我已經看過這裏的問題找到答案，但似乎無法找到它！

從本質上講，我有：

<a href="http://maps.google.co.uk/maps?q=????????&hl=en&sll=???????,-???????1&sspn=??.??????,??.5??????&z=??" target="_blank"><img src="css/images/map.gif" width="655" height="320" /></a>

Map.gif是一個GIF動畫。我目前在頁面上唯一的javascript是

<script type='text/javascript' src='jquery-1.4.3.min.js'></script> 
<script type="text/javascript"> 
$(function(){ // $(document).ready shorthand 
$('#map').hide().fadeIn(2000); 
}); 
</script>

將圖像淡入屏幕。有任何想法嗎！！

感謝 JD

來源

2011-06-29 JD2011

這是我

插入<div id='lightbox' class='white_content'></div>和<div id='fade' class='class='black_overlay'></div> HANDELING這樣的事件到HTML文件的方式。

2.您的CSS的燈箱：

.white_content { 
    display: none; 
    position: absolute; 
    top: 25%; 
    left: 25%; 
    width: 650px; 
    height: 500px; 
    padding: 16px; 
    border: 16px solid white; 
    border-radius: 15px; 
    background-color: white; 
    z-index:1002; 
    overflow: auto; 
    -moz-box-shadow: 5px 5px 10px black; 
    -webkit-box-shadow: 5px 5px 10px black; 
    box-shadow: 5px 5px 10px black; 
} 
    .black_overlay{ 
    display: none; 
    position: absolute; 
     top: 0%; 
    left: 0%; 
    width: 100%; 
    height: 100%; 
    background-color: black; 
    z-index:1001; 
    -moz-opacity: 0.5; 
    opacity:.50; 
    filter: alpha(opacity=100); 
}

而且finaly你需要一個javascript：

function showLightBox() { document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'; }

當你要隱藏的收藏夾，您可以調用一個自定義函數，即設置document.getElementById('light').style.display='none';和document.getElementById('fade').style.display='none';

爲了讓您的收藏夾裏面的谷歌地圖，使用此行代碼在JavaScript中：

document.getElementById('light').innerHTML = " content to show here ";

將內容推送到您的收藏夾。 Normaly您使用Ajax獲得內容到收藏夾

如果你不知道如何嵌入谷歌地圖，你可以在這裏FINDE文檔：

http://code.google.com/apis/maps/documentation/javascript/

來源

2011-06-30 17:53:49 hogni89

谷歌地圖燈箱

回答

相關問題