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.Incrustar Google Maps en la página sin alterar el comportamiento de desplazamiento del iPhone
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.
El mapa se encuentra dentro de un iframe alojado en Google y menos que haya algo de Google alternar con JavaScript dejó, Probablemente no tengas suerte. API v2 ha quedado en desuso, por lo que si encuentras algo que funciona con la versión 3, ¿por qué no haces el cambio? API v3 tiene muchas más características y es más fácil de usar, en mi humilde opinión, de todos modos. (¡No se requieren más claves de API para uno!) – Sparky
Comencé a buscar en v3 antes de publicar esto. Ninguna clave API es agradable pero necesitamos usar la función de geocodificación que parece que requiere una clave API y parece que su respuesta es más compleja que en v2, y tenemos algunas otras páginas que también la usan. Básicamente estoy tratando de evitar unas pocas horas de recodificación para v3 con una rápida corrección v2, pero si eso no es posible, cederé y haré la actualización sensata. – joshuahedlund
Ahora me actualicé a v3 pero no logro que los eventos táctiles funcionen. Estoy estudiando detenidamente mi javascript para ver si hay errores, pero estoy teniendo problemas para que los eventos táctiles respondan a cualquier cosa. – joshuahedlund