0

I am displaying a Google map on a mobile webpage with the following:

<iframe width="100%" height="70%" src="https://maps.google.com/maps?q=loc:'.$latlong.'+('.$balloon.')&amp;t=h&amp;&iwloc=1&amp;z=17&amp;output=embed"></iframe>';

It works fine on Android but on iPhone the map is the full height of the screen instead of 70%. That makes it impossible to scroll down the page because when you try to drag the page, all that you do is drag the map view.

Is that a known problem and is there any solution please?

user2605793
  • 439
  • 1
  • 8
  • 19
  • With so little we can't help. You should add your html/css and even better make a jsfiddle. – drip Nov 20 '13 at 20:27
  • I think this question is a duplicate of http://stackoverflow.com/questions/5267996/how-to-properly-display-an-iframe-in-mobile-safari , which is rather unfortunate since we have no working solution yet... – Scorchio Nov 20 '13 at 21:12

1 Answers1

0

This is a bug in Apple code. No simple solution is available, although I did manage to implement a workaround for my particular problem which is to wrap the iframe in a div:

echo '<div style="height: 300px; width: 100%; overflow: auto;">
<iframe width="100%" height="70%" src="https://maps.google.com/maps?q=loc:'.$latlong.'+('.$balloon.')&amp;t=h&amp;&iwloc=1&amp;z=17&amp;output=embed"></iframe>
</div>';
user2605793
  • 439
  • 1
  • 8
  • 19