Question

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

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

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.