google mapライトボックス

Question

自分のオフィスに私のウェブサイトで使用したい地図のイメージがありますが、画像をクリックしてGoogleマップの場所をプルアップするオプションが必要ですライトボックス....

私はここで質問を見て答えを見つけましたが、それを見つけることができません！

は基本的に、私が持っている：

<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

Answer 1

これは

1. このようなイベントをhandelingの私の方法は、あなたのHTMLファイルに<div id='lightbox' class='white_content'></div>と<div id='fade' class='class='black_overlay'></div>を挿入します。ライトボックスのため

2.Your 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); 
} 

1. そして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';があなたのライトボックスの内側のGoogleマップを取得するには、JavaScriptの内部のコード行を使用：

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

は、あなたのライトボックスにコンテンツをプッシュします。

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

：NormalyあなたはGoogleマップを埋め込む方法がわからない場合は、ライトボックス

にコンテンツを取得するためのAjaxを使用して、あなたはここで文書をfindeすることができます