簡單的谷歌地圖的fancybox

我需要下面的結果顯示在一個的fancybox是有可能嗎？

<h2>Get Directions</h2> 
<form action="http://maps.google.com/maps" method="get" target="fancybox"> 
<h6>Enter your starting address:</h6> 
<input type="text" name="saddr" value="Enter Your Postcode"/> 
<input type="hidden" name="daddr" value="52.444266,-1.648421" /> 
<input type="submit" value="Get Directions" class="button" /> 
</form>

來源

2013-04-23 user1644222

首先，你需要知道什麼URL parameters你可以把信息傳給谷歌地圖，這樣你可以構建你想的fancybox顯示的URL。

二，添加一個ID（例如，id=myMapForm"）到您的形式，所以你可以用jQuery 操縱它：

<form id="myMapForm" action="http://maps.google.com/maps" method="get" target="fancybox"> 
    <h6>Enter your starting address:</h6> 
    <input type="text" name="saddr" value="Enter Your Postcode" /> 
    <input type="hidden" name="daddr" value="52.444266,-1.648421" /> 
    <input type="submit" value="Get Directions" class="button" /> 
</form>

然後，您可以使用下面的腳本：

防止提交在新窗口中的表格
從字段獲得輸入值並將它們存儲在變量中
構建Googl Ë地圖網址傳遞變量作爲參數
中的fancybox打開生成的URL

jQuery代碼：

$("#myMapForm").on("submit", function (e) { 
    e.preventDefault(); 
    var sAdd = $(this).find("input[name=saddr]").val().replace(" ", "+"); 
    var dAdd = $(this).find("input[name=daddr]").val(); 
    var url = "https://maps.google.com/maps?f=q&source=s_q&hl=en&q=from:+" + sAdd + "+to:+" + dAdd + "&ie=UTF8&saddr=" + sAdd + "&daddr=" + dAdd + "&center=" + dAdd + "&z=7&output=embed"; 
    $.fancybox(url, { 
     type: "iframe" 
    }); 
});

注意，我們添加了.replace()方法將源地址轉換任何spaces加入加號（+）。這是因爲郵政編碼可能類似於SW1A 0AA（英國），必須在URL中轉換爲SW1A+0AA。

見JSFIDDLE

注意：.on()需要的jQuery V1.7 +

來源

2013-04-23 19:29:58 JFK

簡單的谷歌地圖的fancybox

回答

相關問題