Jquery 简单的谷歌地图到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>

获取方向
输入您的起始地址：

首先，您可能需要知道可以传递给Google地图的内容，以便构建要在fancybox中显示的URL

第二，在表单中添加一个ID（例如，

ID=myMapForm“

），以便可以使用jQuery对其进行操作 :

请注意我们在源地址中添加了

.replace（）

方法，以将任何

空格

转换为加号（

+

）。这是因为邮政编码可能类似于

SW1A 0AA

（英国），并且必须在URL中转换为

SW1A+0AA

请参见

注意：

.on（）

需要jQuery v1.7+

 <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>

$("#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"
    });
});