Incorpora Google Maps sulla pagina senza escludere il comportamento di scorrimento di iPhone

Question

Sto lavorando per ottimizzare un sito per dispositivi mobili. Abbiamo una pagina Posizione che include informazioni su una posizione e una mappa della posizione tramite l'API di Google Maps. (v2 - So che è deprecato ma non ho giustificato il tempo di aggiornamento, "se non è rotto ..") Voglio usare un layout a colonna singola con le informazioni di base seguito dalla mappa seguito da ulteriori informazioni.

Ora quando uso il dito per scorrere la pagina mobile su un iPhone, una volta arrivato alla mappa, lo scorrimento della pagina viene annullato e la mappa inizia a eseguire il panning. L'unico modo per farmi scorrere più in basso nella pagina è mettere il mio dito sopra o sotto la mappa, assumendo che questo spazio sia disponibile. Se disattivo il trascinamento della mappa, quando inizio a scorrere verso il basso e ad arrivare alla mappa non viene spostato, ma la pagina non scorre neanche. Mi piacerebbe considerare la mappa come un'immagine statica che posso scorrere oltre, ma consentire comunque i pulsanti di zoom e consentire di ridisegnare la mappa con le direzioni attraverso un campo selezionato che ho codificato, quindi una literal static image non è una soluzione.

Ho trovato this post that required similar functionality, ma sta utilizzando v3. Penso che tutto ciò che devo fare sia "aggiungere eventi di tocco al contenitore della mappa", ma non ho familiarità con quella parte di javascript e ciò che ho di seguito non consente lo scorrimento normale. Devo mordere il proiettile su v3, o ho un bug sull'aggiunta di eventi di tocco che ha una semplice correzione javascript per fare ciò che voglio?

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

ho anche provato a sostituire map.addEventListener con document.getElementById("map_canvas").addEventListener o document.addEventListener senza alcun risultato.

Answer 1

Ho risolto l'errore eseguendo l'aggiornamento a v3 e quindi rilevando un errore javascript di base nel mio utilizzo del codice dalla soluzione collegata sopra. La chiave era

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

L'utente deve essere stato l'impostazione degli eventi variabile da qualche parte al di fuori del codice presentato, in quanto sembra che l'assegnazione di corrispondenza è per gli eventi di tocco e l'assegnazione resto è per gli eventi importanti. Ma dal momento che non ho avuto una variabile di eventi era di default al compito sbagliato. Ho semplicemente cambiato il mio in start = e.touches[0].pageY (e ho fatto lo stesso per l'evento touchend) e ora tutto funziona.

Tuttavia, sono passato di nuovo alla v2 per vedere se avrebbe funzionato con quell'errore javascript corretto, e così non è stato. Quindi sembra che non abbia perso tempo ad aggiornare la v3, né nel capire questa soluzione specifica né nel prepararmi per una futura compatibilità.

In conclusione, se si desidera incorporare Google Maps su una pagina mobile ed essere in grado di scorrere oltre, è necessario utilizzare l'API v3, disabilitare il trascinamento e aggiungere eventi di tocco. Ho fatto un paio di modifiche minori per il mio codice pure, presentato qui per chiunque possa beneficiare in 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);