Famo.us with Google Maps – dragging on devices

by Frank Bølviken

Background

I’ve been experimenting with the interesting famous framework for the last couple of days. I won’t go into details about what it is and how it works here, but basically it’s a new way of working with the DOM with pure javascript, to create html5 applications for mobile devices. I’ve been using a lot of Sencha Touch for this matter before, both work and private applications but I have not been too happy with the performance (all tough not bad!).

So I decided to test this framework by creating a small and simple application using Google Maps to view a map (wow, thats advanced!).

Problem arises

Step one was adding a surface with placeholder for maps component:

var mapSurface = new Surface({
content: '<div id="myMap" style="width: 100%; height: 100%;"></div>'
});

First trick.. needed to add the actual instantiation of the map inside a Timer (if not, the map wont load).

setTimeout(function() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById('myMap');

var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById('myMap'),
mapOptions);
}, 1000);

It all worked nice in the browser, but when testing on a device (using cordova/phonegap) I could not scroll the map by dragging the finger.
After a lot of back en forth, i was pointed in the direction by @zawaung on Twitter, saying that famo.us prevented scrolling in browser (thereby disabling dragging in the google maps component).

Solution

Since the boilerplate code is using a CDN delivered minified version of the famo.us javascript library a different approach was needed. So heres what I did.

1: Installed famous generator for yeoman
2: Created new project in command line: yo famous
3: Commented out line 120  – 122 in Engine.js (which disabled touchmove event)

// prevent scrolling via browser
// window.addEventListener('touchmove', function(event) {
// event.preventDefault();
//}, true);

4: Build the project: grunt
5: Wolla, works!

Hope this will save some time for some people out there!

Advertisement