When doing sites I usually use the Google Maps IFRAME to drop a map onto the contact page or whatnot. I know the JS API is way cooler, but time is of the essence more often than never. So, anyway…The problem with using the copy-and-paste code from the Google Maps website is that it zooms to center on the map point, often leaving the balloon with the address outside the bounds of the iframe. What is more desirable is to have the map point and balloon zoom to fit. Well, here’s my solution to make that happen.

<iframe width="100%" height="400" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;iwd=1&amp;iwloc=addr&amp;source=s_q&amp;hl=en&amp;geocode=&amp;t=m&amp;q=The+White+House&amp;sll=&amp;sspn=&amp;ie=UTF8&amp;hq=&amp;hnear=1600+Pennsylvania+Ave,+Washington+DC&amp;ll=&amp;spn=0.035898,0.055189&amp;z=16&amp;output=embed"></iframe>

 

Published on July 11, 2012