谷歌静态地图图片链接到谷歌iframe [英] Google static map image with link to Google iframe

问题描述

我试图展示一个google静态地图，点击后会打开一个更大的iframe，用户可以在其中进行平移，缩放等操作。

<一个href =http://jsfiddle.net/thong/Q4FE7/ =nofollow> JSFiddle here

代码如下：

 < div> 
< a class =various fancybox.iframetitle =Whitehouse  -  USAhref =https://maps.google.com/maps?f=d&amp;source=s_d&amp;saddr =&放大器;放大器; DADDR = 1600 +宾夕法尼亚+大道+ NW，+白+房屋+华盛顿+ DC + 20500&放大器;放大器; HL = EN&放大器;放大器;地理编码= Ca3jx5Eq6BcjFQ6IUQIdG4Ro-ynPaZnjvLe3iTGGOSyaFzTP2g和放大器;放大器; SLL = 38.897678，-77.036517 &放大器;放大器; SSPN = 0.009644,0.01443&放大器;放大器; G = 1600 +宾夕法尼亚+大道+西北，+华盛顿，+ DC&放大器;放大器; MRA = LS&放大器;放大器，即= UTF8&放大器;放大器; T = M&放大器;放大器; 11 = 38.89768，-77.036519&放大器;放大器; SPN = 0.008016,0.013733&放大器;放大器; Z = 16&放大器;放大器;输出=嵌入> 
 
  
< / a> 
< / div> 
  

我试图寻找与iframe相关的非javascript文档，但还没有来跨越任何东西我想将以下添加到iframe中：

标记中心 - JSFiddle显示居中，但生产站点上运行的代码完全相同，会呈现一个iframe，其标记将出现在左上角。

删除标记标签B

从我的数据库中输入我自己的坐标 - 例如...对纽约市，芝加哥等做同样的操作。但是，我试着改变 daddr （目标地址），但我不确定其他变量代表什么（即sll，sspn，g，mra，ll等）

获取路线 - 插入出发点，并获取前往目的地的路线

• code> f
  对于路线，
  必须是 d



• saddr
  
  的起始地址，可能是一个字符串（可能是地理定位的）或latLng 目的地址，可能是一个字符串（可能是地理定位的）或latLng

• strong>
  
  以地图为中心的位置（latlng）。如果省略，地图将根据标记居中。

> z

地图的缩放比例。当省略时，地图将根据方向缩放。

必须为嵌入 for iframe

您可以在 http://www.seomoz.org/ugc/everything-you-never-wanted-to-know-about-google-maps-parameters

但是：您应该注意，没有任何参数是任何官方API的一部分，它可能每天都会更改

---

问题：

1. ：
   
   标记无法居中，因为iframe在地图开始加载时不可见，无法确定iframe的大小。您可以使用一种解决方法：

   
   
   

   首先在iframe中加载一个虚拟页面，当fancybox打开时加载地图。

   
   
   

   这可以通过将其添加到fancybox选项来完成：
   
   

     beforeLoad：function（）{
    //存储原始的href供以后使用
    this.oldhref = this.href; 
    //用一些虚拟页面替换href 
    this.href ='wait.htm'; 
   返回true; 
   }，
    afterLoad：function（）{
    //将最初请求的页面加载到iframe 
    $（'。fancybox-iframe'）。attr（'src'， this.oldhref）; 
   } 
     




2. 删除标记标签B
   
   没有选择删除B，只能用 A 替换它。
   因此，您必须将标记设置为起始目的地（saddr）的标记。
   

3. 从我的数据库输入我自己的坐标
   
   将坐标应用于saddr或daddr（取决于它应该是什么，开始或目的地）

获取路线 - 插入出发点，并获取前往目的地的路线

查看3。

---

最后：您应该考虑使用Maps-Javascript-API创建自己的地图来获取您可以处理的地图。

I am trying to display a google static map, which when clicked, will open up a larger iframe, where the user can pan, zoom, etc.

JSFiddle here

Code below:

<div>
    <a class="various fancybox.iframe" title="Whitehouse - USA" href="https://maps.google.com/maps?f=d&amp;source=s_d&amp;saddr=&amp;daddr=1600+Pennsylvania+Ave+NW,+White+House,+Washington,+DC+20500&amp;hl=en&amp;geocode=Ca3jx5Eq6BcjFQ6IUQIdG4Ro-ynPaZnjvLe3iTGGOSyaFzTP2g&amp;sll=38.897678,-77.036517&amp;sspn=0.009644,0.01443&amp;g=1600+Pennsylvania+Avenue+Northwest,+Washington,+DC&amp;mra=ls&amp;ie=UTF8&amp;t=m&amp;ll=38.89768,-77.036519&amp;spn=0.008016,0.013733&amp;z=16&amp;output=embed">

        <img src="http://maps.googleapis.com/maps/api/staticmap?center=1600+Pennsylvania+Ave+NW,+White+House,+Washington,+DC+20500&markers=1600+Pennsylvania+Ave+NW,+White+House,+Washington,+DC+20500&size=300x300&sensor=false">

    </a>
</div>

I have tried to look for the non-javascript documentation relating to the iframe,but haven't come across anything. I would like to add the following to the iframe:

Center on the marker - The JSFiddle appears centered, but the exact same code run on the production site renders an iframe with the marker appearing in the top left.

Remove the marker label "B"

Input my own coordinates from my database - for example... do the same for New York City, Chicago, etc.. However, I have tried changing the daddr (destination address), but am unsure what the other variable stand for (i.e. sll, sspn, g, mra, ll, etc.)

Get directions - insert starting point, and get directions to pre-determined destination

解决方案

At first a explanation of the parameters you need:

• f
  has to be d for directions

• saddr
  the start-address, may be a string(would be geolocated) or a latLng

• daddr
  the destination-address, may be a string(would be geolocated) or a latLng

• ll
  where to center the map(latlng) .when ommited, the map will be centered based on the markers

• z
  the zoom of the map. When ommitted the map will be zoomed based on the direction

• output
  has to be embed for iframe

A detailed list and explanation of the parameters you'll find at http://www.seomoz.org/ugc/everything-you-never-wanted-to-know-about-google-maps-parameters

However: you should note that none of the parameters is a part of any official API, it may change every day

---

The issues:

1. Center on the marker:
   the marker could not be centered, because the iframe isn't visible when the map starts loading, unable to determine the size of the iframe . You could use a workaround:

   First load a dummy-page into the iframe, when the fancybox is open, load the map.

   This can be done by adding this to the fancybox-options:

   beforeLoad: function(){
     //store the original href for later use
    this.oldhref=this.href;
     //replace the href with some dummy-page
    this.href='wait.htm';
    return true;
   },
   afterLoad:function(){
     //load the originally requested page to the iframe
    $('.fancybox-iframe').attr('src',this.oldhref);
   }
   

2. Remove the marker label "B"
   there is no option to remove the B, all you can to is replace it with an A . Therefore you must set the marker as the marker for the start-destination (saddr)

3. Input my own coordinates from my database
   apply the coordinates to saddr or daddr(depending on what it should be, start or destination)

4. Get directions - insert starting point, and get directions to pre-determined destination
   see 3.

---

Finally: you should consider to create a own map using the Maps-Javascript-API to get a map that you can handle yourself.

这篇关于谷歌静态地图图片链接到谷歌iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！