title: Google Maps iFrame Mobile View getting clipped
body: <p>My client has a wordpress site and one page is embedding a map via <code>iframe</code>: </p>
  
  <pre><code>&lt;iframe 
      src="http://maps.google.com/maps?q=16162+Beach+Boulevard+%23100,+Huntington+Beach&amp;amp;hl=en&amp;amp;pcsi=2051297199499108728,1&amp;amp;geocode=FUCmAgIdBaP3-A&amp;amp;sll=33.728064,-117.988603&amp;amp;sspn=0.006295,0.006295&amp;amp;ie=UTF8&amp;amp;view=map&amp;amp;cid=2051297199499108728&amp;amp;hq=16162+Beach+Boulevard+%23100,+Huntington+Beach&amp;amp;hnear=&amp;amp;ll=33.730729,-117.987242&amp;amp;spn=0.005354,0.006437&amp;amp;z=16&amp;amp;iwloc=A&amp;amp;output=embed" 
      height="350" 
      width="690" 
      frameborder="0" 
      marginwidth="0" 
      marginheight="0" 
      scrolling="no"&gt;
  &lt;/iframe&gt;
  </code></pre>
  
  <p>When I view the page in my iPhone, it renders mobile-friendly and resizes the <code>iframe</code> to fit the viewport, but the state and zip code are getting cut off. I tried adjusting the height of the <code>iframe</code> and also the bottom padding, but it seems to be something on Google's end. Any idea how to fix this? I added a blue border to my <code>iframe</code> so you can see that it's not the <code>iframe</code> which is clipping the text:</p>
  
  <p><img src="https://i.stack.imgur.com/ENYY5.png" alt="Example screenshot"></p>