Google Maps API; Suppress Map Panning to enable Page Scrolling

Question

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.

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.

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.

Here's a link to the page:

http://cs.sandbox.millennialmedia.com/~tkirchner/sites/K/kumon/zip_page.php

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.

Any help or links would be appreciated.

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 );           
    });
}

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.

UPDATE: Got it! I attached touch events to the google map container "map" and that worked!

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.

Answer 1

I got it! Although I'm not sure why this is the case.

I solved my original problem by setting the map argument to false and then adding touch events to the map container that would scroll the page up and down as I moved my finger up and down. However, that introduced a new problem in that now I couldn't click on markers anymore. In order for me to click on the markers and get the info window I had to click some arbitrary place on the screen. The problem wasn't occurring on Droid, only on iPhone. Plus, I noticed that if I moved the map to the upper left corner of the screen, the problem didn't occur.

After testing it on a variety of iPhones around the office, ranging from iPhone 3G - 4 and iOS 3.1 - 4.2 I found out that the problem seemed to be coming when I got the customer's current address.

In order to get the customer's current location, I first try to use the "Get Current Location" popup that's native to the iPhone and Android browsers. If they click "Don't Allow" then they can enter in their zip code and get it that way.

The problem seemed to be occurring every time I tried using my current location via the form submit than from the popup window, so I concentrated my debug efforts on that.

Once I had that zip code I needed to convert it to lat/long. Originally, I had it set up for my plugin to query a php script that I made called dataManager.php. The manager program would take the zip and make a curl request to google maps to convert that into a zip code. It would then return the converted location back to my plugin.

I didn't realize that you could geocode zip codes right from the google maps API. All I knew was that url that I could run queries off of. So I edited my code to geocode using the API and let the process run the rest of the way normally.

Worked like a charm. Now I'm clicking the markers and the Info Windows are coming right up. Although, I'm still not sure why this fixed it. Nothing changed in the order that these things get processed. The data wasn't different. All that was different was that first step. Maybe it was a timing issue. The API call is much faster than making two HTTP request hops.

Answer 2

you need scrollwheel:false in the options