StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POGoogle Maps API; Suppress Map Panning to enable Page Scrolling
text
Body
copied!<p>I have a mobile webpage in which a customer can enter in their zip code either by a form submit or the current location popup and then find centers that are nearby. The response includes a list of these centers as well as a google maps insert showing their location and pins indicating the centers indicated in the list.</p> <p>The problem is the map takes up a lot of real estate on the page. Its difficult to scroll down to the listing just below the map.</p> <p>I'd like to disable the panning feature on the Google Maps so people can touch the map and scroll up and down the page. However, I don't want to completely suppress all touch events on the map because I still want people to be able to click on the pins and view the pop up info box that goes along with those markers. Hense why I thought a static image implementation might not be the way to go.</p> <p>Here's a link to the page:</p> <p><a href="http://cs.sandbox.millennialmedia.com/~tkirchner/sites/K/kumon/zip_page.php" rel="noreferrer">http://cs.sandbox.millennialmedia.com/~tkirchner/sites/K/kumon/zip_page.php</a></p> <p>I'm still relatively new to the Google API, so I'm sure there's some option or event listener I need to customize and I can't seem to find it in the documentation just yet.</p> <p>Any help or links would be appreciated.</p> <pre><code>function setMap(map) { if ( typeof googleMap != 'undefined' && !changeFlag ) return; var current = new google.maps.LatLng( f.current.latitude, f.current.longitude ); var dragFlag = false; var start = 0, end = 0, windowPos = 0; zoom = zoom == 0 ? bestZoom() : zoom; map.html(''); var mapArgs = { zoom : zoom, center : current, mapTypeId : google.maps.MapTypeId.ROADMAP, backgroundColor : '#FFFFFF', mapTypeControl : false, }; if ( !config.panning ) mapArgs['draggable'] = false; googleMap = new google.maps.Map(map.get(0), mapArgs); new google.maps.Marker({ position : current, map : googleMap, title : 'You Are Here', icon : 'youarehere.png' }); movement = 0; if ( !config.panning && events == 'touch' ) { map.get(0).addEventListener('touchstart', function(e){ dragFlag = true; start = events == 'touch' ? e.touches[0].pageY : e.clientY; },true); map.get(0).addEventListener('touchend', function(){ dragFlag = false; }, true); map.get(0).addEventListener('touchmove',function(e){ if ( !dragFlag ) return; end = events == 'touch' ? e.touches[0].pageY : e.clientY; window.scrollBy( 0,( start - end ) ); }, true); } for( var i in f.locations ) { var location = new google.maps.LatLng( f.locations[i].latitude, f.locations[i].longitude ); var args = { position : location, map : googleMap, }; var marker = new google.maps.Marker(args); var infoBox = config.infoBox; var msg = config.infoBox; for( var x in propertyList ) { var myExp = new RegExp('{{'+propertyList[x]+'}}'); if( myExp.test(msg) && typeof(f.locations[i][propertyList[x]]) != 'undefined' && f.locations[i][propertyList[x]] != "" ) msg = msg.split('{{'+propertyList[x]+'}}').join(f.locations[i][propertyList[x]]); else if( myExp.test(msg) ) msg = msg.split('{{'+propertyList[x]+'}}').join(''); } setMessage(marker,msg); } } function setMessage(marker, msg) { var infoWindow = new google.maps.InfoWindow({ content : msg }); google.maps.event.addListener(marker,'click',function(){ if ( openBoxes.length > 0 ) openBoxes.pop().close(); infoWindow.open(googleMap,marker); openBoxes.push( infoWindow ); }); } </code></pre> <p>UPDATE: Well I figured out that if I set draggable : false that it prevents the map from panning. Now I can figure out how to get the page to scroll when I touch and drag on the map I'll be good to go.</p> <p>UPDATE: Got it! I attached touch events to the google map container "map" and that worked!</p> <p>UPDATE: Actually, I'm still falling short. Its working on my desktop fine, but not on my iPhone. It lets me scroll up and down fine, but I can't seem to click on any of the markers. On my desktop, it works great. The page scrolls up and down and I can click on my icons. I noticed that the click event on my marker icons doesn't seem to be firing. Somethings gotta be preventing it.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload