Google static map image with link to Google iframe

问题

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

回答1:

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:

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);
}
```
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)
Input my own coordinates from my database
apply the coordinates to saddr or daddr(depending on what it should be, start or destination)
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.

来源：https://stackoverflow.com/questions/14212871/google-static-map-image-with-link-to-google-iframe

标签

google-maps

google-maps-api-3

fancybox