Google сопоставляет стили перехода и отключает прокрутку на мобильном устройстве

Question

Я создаю некоторую карту Google на основе адреса, но у меня есть проблема с передачей некоторого стиля и отключением прокрутки на мобильных устройствах.

Вот что у меня есть на текущий момент

//<![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"); 
    } 

    //]]> 

и стайлинг

// 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

Вот основы для создания карты и маркер, я не уверен, что об отключении мобильного скроллинг:

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

Вы можете увидеть это в действии здесь: http://jsfiddle.net/duncancumming/dajgrrvx/3/