Google maps passing styles and disable scroll on mobile device

Question

I am creating some google map based on adress, but i have problem passing some styling and disable scroll on mobile devices.

Here is what i have for now

  //<![CDATA[

    if (GBrowserIsCompatible()) {

        // A function to create the marker and set up the event window
        // Dont try to unroll this function. It has to be here for the function closure
        // Each instance of the function preserves the contends of a different instance
        // of the "marker" and "html" variables which will be needed later when the event triggers.
        function createMarker(point, html) {
            var marker = new GMarker(point);

            return marker;
        }

        // Display the map, with some controls and set the initial location
        var map = new GMap2(document.getElementById("map-canvas"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(-15.4165216,28.2794958,17), 15);

        // Set up three markers with info windows

        var point = new GLatLng(-15.4165216,28.2794958,17);
        var marker = createMarker(point, '');
        map.addOverlay(marker);


    }

        // display a warning if the browser was not compatible
    else {
        alert("Sorry, the Google Maps API is not compatible with this browser");
    }

    //]]>

And styling

// Create an array of styles.
            var styles = [
            {
              "featureType": "landscape",
              "elementType": "geometry.fill",
              "stylers": [{ "color": "#ffffff" }]
            },
            {
              "featureType": "landscape.natural.terrain",
              "elementType": "geometry.fill",
              "stylers": [{ "color": "#000000" }]
            },
            {
              "featureType": "poi",
              "elementType": "geometry.fill",
              "stylers": [{ "color": "#eeeeee" }]
            },
            {
              "featureType": "administrative",
              "elementType": "labels.text.fill",
              "stylers": [{ "color": "#2ec3f3" }]
            },
            {
              "featureType": "road.arterial",
              "elementType": "geometry.fill",
              "stylers": [{ "color": "#eeeeee" }]
            },
            {
              "featureType": "road.arterial",
              "elementType": "geometry.stroke",
              "stylers": [{ "color": "#cccccc" }]
            },
            {
              "featureType": "road",
              "elementType": "labels.text.fill",
              "stylers": [{ "color": "#666666" }]
            },
            {
              "featureType": "road",
              "elementType": "labels.text.stroke",
              "stylers": [{ "color": "#ffffff" }]
            },
            {
              "featureType": "road.highway",
              "elementType": "geometry.fill",
              "stylers": [{ "color": "#bbbbbb" }]
            },
            {
              "featureType": "road.highway",
              "elementType": "geometry.stroke",
              "stylers": [{ "color": "#dddddd" }]
            },
            {
              "featureType": "road.local",
              "elementType": "geometry.fill",
              "stylers": [{ "color": "#e5e5e5" }]
            },
            {
              "featureType": "water",
              "elementType": "geometry.fill",
              "stylers": [{ "visibility": "off" }]
            },
            {
                featureType: "poi.business",
                elementType: "labels.icon",
                stylers: [
                  { visibility: "off" }
                ]
              },{
                featureType: "poi.school",
                elementType: "labels.icon",
                stylers: [
                  { visibility: "off" }
                ]
              },{
                featureType: "poi.park",
                elementType: "labels.icon",
                stylers: [
                  { visibility: "off" }
                ]
              }
          ];

Answer 1

Here's the basics for creating the map and marker, I'm not sure about disabling mobile scrolling:

function initMap() {
    var styles = [{
        featureType: "landscape",
        elementType: "geometry.fill",
        stylers: [{
            color: "#ffffff"
        }]
    }, {
        featureType: "landscape.natural.terrain",
        elementType: "geometry.fill",
        stylers: [{
            color: "#000000"
        }]
    }, {
        featureType: "poi",
        elementType: "geometry.fill",
        stylers: [{
            color: "#eeeeee"
        }]
    }, {
        featureType: "administrative",
        elementType: "labels.text.fill",
        stylers: [{
            color: "#2ec3f3"
        }]
    }, {
        featureType: "road.arterial",
        elementType: "geometry.fill",
        stylers: [{
            color: "#eeeeee"
        }]
    }, {
        featureType: "road.arterial",
        elementType: "geometry.stroke",
        stylers: [{
            color: "#cccccc"
        }]
    }, {
        featureType: "road",
        elementType: "labels.text.fill",
        stylers: [{
            color: "#666666"
        }]
    }, {
        featureType: "road",
        elementType: "labels.text.stroke",
        stylers: [{
            color: "#ffffff"
        }]
    }, {
        featureType: "road.highway",
        elementType: "geometry.fill",
        stylers: [{
            color: "#bbbbbb"
        }]
    }, {
        featureType: "road.highway",
        elementType: "geometry.stroke",
        stylers: [{
            color: "#dddddd"
        }]
    }, {
        featureType: "road.local",
        elementType: "geometry.fill",
        stylers: [{
            color: "#e5e5e5"
        }]
    }, {
        featureType: "water",
        elementType: "geometry.fill",
        stylers: [{
            visibility: "off"
        }]
    }, {
        featureType: "poi.business",
        elementType: "labels.icon",
        stylers: [{
            visibility: "off"
        }]
    }, {
        featureType: "poi.school",
        elementType: "labels.icon",
        stylers: [{
            visibility: "off"
        }]
    }, {
        featureType: "poi.park",
        elementType: "labels.icon",
        stylers: [{
            visibility: "off"
        }]
    }];

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 17,
        center: {
            lat: -15.4165216,
            lng: 28.2794958
        },
        styles: styles
    });

    var marker = new google.maps.Marker({
        position: {
            lat: -15.4165216,
            lng: 28.2794958
        },
        map: map
    });
}

google.maps.event.addDomListener(window, "load", initMap);

You can see this in action here: http://jsfiddle.net/duncancumming/dajgrrvx/3/