Incrustar Google Maps en la página sin alterar el comportamiento de desplazamiento del iPhone

Question

Estoy trabajando en la optimización de un sitio para dispositivos móviles. Tenemos una página de ubicación que incluye información sobre una ubicación y un mapa de la ubicación a través de la API de Google Maps. (v2 - Sé que está en desuso, pero no justifiqué el momento de la actualización, "si no está roto ...") Quiero utilizar un diseño de columna única con información básica seguida del mapa seguido de más información.

Ahora cuando uso el dedo para desplazarme hacia abajo en la página móvil de un iPhone, una vez que llego al mapa, el desplazamiento de la página queda anulado y el mapa comienza a panoramizarse. La única forma de desplazarme más abajo en la página es colocar el dedo encima o debajo del mapa, suponiendo que haya espacio disponible. Si desactivo el arrastre del mapa, cuando empiezo a desplazarme hacia abajo y al mapa no se desplaza, pero la página tampoco se desplaza. Me gustaría tratar el mapa como una imagen estática que puedo desplazar, pero aún permitir los botones de zoom y permitir que el mapa se vuelva a dibujar con las direcciones a través de un campo de selección que he codificado, por lo que literal static image no es una solución.

Encontré this post that required similar functionality, pero está usando v3. Creo que todo lo que tengo que hacer es "agregar eventos táctiles al contenedor del mapa", pero no estoy familiarizado con esa parte de javascript, y lo que tengo a continuación no permite el desplazamiento normal. ¿Tengo que morder la viñeta en v3 o tengo un error al agregar eventos táctiles que tiene una corrección de JavaScript simple para hacer lo que quiero?

function initialize() { 
    if (GBrowserIsCompatible()) { 
    map = new GMap2(document.getElementById("map_canvas")); 
    geocoder = new GClientGeocoder(); 
    } 
} 

function showAddress(address, zoom) { 
//clipped... this part works fine 
} 

//These three lines create a map that my finger pans 
initialize(); 
showAddress("[clipped.. street, zip code]"); 
map.addControl(new GSmallZoomControl3D()); 

//This stops the map pan but still prevents normal page finger scrolling 
map.disableDragging(); 

//If done right could this allow normal page finger scrolling?? 
var dragFlag = false; 
map.addEventListener("touchstart", function(e){ 
    dragFlag = true; 
    start = (events == "touch") ? e.touches[0].pageY : e.clientY; 
},true); 
map.addEventListener("touchend", function(){ 
dragFlag = false; 
}, true); 
map.addEventListener("touchmove",function(
if (!dragFlag) return; 
end = (events == "touch") ? e.touches[0].pageY : e.clientY; 
window.scrollBy(0,(start - end)); 
}, true); 

también he intentado reemplazar map.addEventListener con document.getElementById("map_canvas").addEventListener o document.addEventListener en vano.

Answer 1

Lo resolví actualizando a v3 y luego detecté un error básico de javascript en mi uso del código de la solución vinculada anteriormente. La clave era

start = (events == "touch") ? e.touches[0].pageY : e.clientY; 

El usuario debe haber sido el establecimiento de los eventos variable de algún lugar fuera del código presentado, ya que parece que la asignación juego es para eventos de toque y la asignación demás es para los eventos clave. Pero como no tenía una variable de eventos, estaba configurada por defecto en la asignación incorrecta. Simplemente cambié el mío al start = e.touches[0].pageY (e hice lo mismo para el evento touchend) y ahora todo funciona.

Sin embargo, volví a cambiar a v2 para ver si funcionaba con ese error de javascript corregido, y no fue así. Por lo tanto, parece que no perdí el tiempo actualizando a v3, ni para encontrar esta solución específica ni para configurarme para compatibilidad futura.

En conclusión, si desea incrustar Google Maps en una página móvil y poder desplazarse más allá, debe usar API v3, desactivar el arrastre y agregar eventos táctiles. Hice algunos ajustes menores a mi código, así, que aquí se presenta para cualquiera que pueda beneficiarse en el futuro:

function initialize() 
{ 
    geocoder = new google.maps.Geocoder(); 
    var myOptions = { 
     mapTypeId: google.maps.MapTypeId.ROADMAP    
    }; 

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
} 

function showAddress(address, zoom) 
{ 
    if (geocoder) 
    { 
     geocoder.geocode({ 'address': address }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location); 
      map.setOptions({ zoom: zoom }); 
      var marker = new google.maps.Marker({ 
       map: map, 
       position: results[0].geometry.location 
      }); 
     } 
     }); 
    } 
} 

initialize(); 
showAddress("'.$geocode_address.'"); 

map.setOptions({ draggable: false }); 

var dragFlag = false; 
var start = 0, end = 0; 

function thisTouchStart(e) 
{ 
    dragFlag = true; 
    start = e.touches[0].pageY; 
} 

function thisTouchEnd() 
{ 
    dragFlag = false; 
} 

function thisTouchMove(e) 
{ 
    if (!dragFlag) return; 
    end = e.touches[0].pageY; 
    window.scrollBy(0,(start - end)); 
} 

document.getElementById("map_canvas").addEventListener("touchstart", thisTouchStart, true); 
document.getElementById("map_canvas").addEventListener("touchend", thisTouchEnd, true); 
document.getElementById("map_canvas").addEventListener("touchmove", thisTouchMove, true);