首先,你需要知道什麼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 + "¢er=" + 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