SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    24
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Google Map on Mobile

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    <!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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •