Google Map on Mobile

Mobile
1

I have a small but annoying issue with Google Maps on phones.

Here’s the url w ww.acs ilver.co.uk/shop/m/ (remove two spaces)

The issue is found near the bottom of the page. In Samsung Galaxy S4 the map does not move around but it works ok for Galaxy 10.1. The other issue seems to occur to Iphone users. Even though they can move the map around they cannot scroll back up or down with their fingers because the map is filling up most of the screen. Sometimes this happens to android phones as well where it works at times and then other times it doesn’t.

Please play around with it thoroughly so you can see the issue.

Any suggestion would be most helpful.
Thank you.

2

HI,

I think the problem is that the map is an iframe and once the iframe fills the viewport you will be stuck on that page. I would have thought the map should have used two finger scrolling to avoid this issue as it does with divs set to overflow:scroll.

I supose an easy solution is to always leave a slight gap at the side of the page in the smaller viewports so that there is some of the page underneath to scroll width.

e.g.


<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0;
}
.wrap {
	width:600px;
	margin:auto;
}
.map {
	display:block;
	margin:auto;
	width:600px;
	height:600px;
}
.mapwrap {
	background:#000;
	color:#fff;
	position:relative;
}
@media screen and (max-width:600px) {
.wrap { width:auto }
.map {
	display:block;
	margin:auto;
	width:80%;
	height:450px;
}
.mapwrap:before, .mapwrap:after {
	content:"\\2191";
	position:absolute;
	right:5px;
	top:5px;
	width:10px;
	height:10px;
	color:#fff;
	text-align:center;
}
.mapwrap:after {
	content:"\\2193";
	bottom:15px;
	top:auto;
}
}
</style>
</head>

<body>
<div class="wrap">
		<p>Content to scroll</p>
		<p>Content to scroll</p>
		<p>Content to scroll</p>
		<p>Content to scroll</p>
		<p>Content to scroll</p>
		<p>Content to scroll</p>
		<div class="mapwrap">
				<iframe class="map" width="280" height="450" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/?ie=UTF8&amp;t=m&amp;ll=51.484804,-1.680908&amp;spn=0.598627,0.823975&amp;z=9&amp;output=embed"></iframe>
		</div>
		<p>Content to scroll</p>
		<p>Content to scroll</p>
		<p>Content to scroll</p>
		<p>Content to scroll</p>
		<p>Content to scroll</p>
		<p>Content to scroll</p>
		<p>Content to scroll</p>
</div>
</body>
</html>

I have seen a few threads in other forums that mention using API v3 instead of iframes and then to disable dragging and add touch events instead but that seems like a lot of work to me.