Every time I embed an iframe from Google Maps it keeps the marker in the middle.

And it does even if there's a tooltip and just CUTS the tooltip data:

/

Are there url parameters or something to center the map on the tooltip?

Every time I embed an iframe from Google Maps it keeps the marker in the middle.

And it does even if there's a tooltip and just CUTS the tooltip data:

http://jsfiddle/V2SVa/

Are there url parameters or something to center the map on the tooltip?

• javascript
• html
• url
• maps

2 Answers 2

Well, if you are using the API, then you can issue a call to map.setCenter().

If however you are including the maps inline as in your example, then you just need to change the initial starting point.

The URL you are using to embed the map is:

http://maps.google./maps?f=q&source=s_q&hl=en&geocode=
  &q=Museum+near+Washington,+United+States&aq=0
  &sll=40.702863,-74.055748&sspn=0.025669,0.055747&ie=UTF8
  &hq=Museum&hnear=Washington+D.C.,+District+of+Columbia
  &ll=38.913976,-77.05111&spn=0.052698,0.111494&t=h&z=14
  &iwloc=A&cid=4718114823360363843&output=embed

Just a matter of adjusting certain parameters.

The parameters you need to adjust are ll = center location, z = zoom level and spn/sspn = span / screen span. Surprisingly awkward to find information on them, but there is some details on the parameters here. Try fiddling with the ll parameter first if you need to change just the centre.

This works for me:

HTML

<div style="height: 400px; overflow: hidden;">
  <iframe width="425" height="700" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google./maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Museum+near+Washington,+United+States&amp;aq=0&amp;sll=40.702863,-74.055748&amp;sspn=0.025669,0.055747&amp;ie=UTF8&amp;hq=Museum&amp;hnear=Washington+D.C.,+District+of+Columbia&amp;ll=38.913976,-77.05111&amp;spn=0.052698,0.111494&amp;t=h&amp;z=14&amp;iwloc=A&amp;cid=4718114823360363843&amp;output=embed"></iframe>
</div>

JQUERY (not even necessary)

$("iframe").load(function (){
  $('iframe').css({"height": '400px'});
});

Demo: http://tinker.io/9ace5