GoogleMaps API V3 Windows OS touch support for panning and pinch-to-zoom

Question

My colleagues and I were surprised to found that GoogleMaps API V3 doesn't have Windows touch support, so we spent quite some time and tried to figure out a way to translate mouse events to touch events. We did something for example

$('#interceptor')[0].addEventListener('pinchin', _.bind(function(event){
        var scale = event.gesture.scale;
        this.map.setZoom(Math.max(1, Math.ceil(this.map.getZoom() * scale)));

      }, this));

to translate pinchin events to zoomout functions. We also used a touch javascript library Hammer.js for classifying the touch events. Is there better way to do this? Thanks in advance!

Answer 1

We ended up implementing methods to translate touch events to mouse events/functions for panning and zooming

    initialize: function() {

      this.render();

      this.initMap();

      this.hammer = Hammer(this.$el.find('#interceptor')[0], {
        transform_always_block: true,
        transform_min_scale: 0,
        drag_block_horizontal: true,
        drag_block_vertical: true,
        drag_min_distance: 0,
        show_touches: true
      });

      if(!Hammer.HAS_TOUCHEVENTS && !Hammer.HAS_POINTEREVENTS) {
        Hammer.plugins.fakeMultitouch();
        Hammer.plugins.showTouches();
      }

      this.initEvents(this.getMap());
    }, 

    initEvents: function(map) {

      $('#interceptor')[0].addEventListener('pinchin', _.bind(function(event){
        var scale = event.gesture.scale;
        this.map.setZoom(Math.max(1, Math.ceil(this.map.getZoom() * scale)));

      }, this));

      $('#interceptor')[0].addEventListener('pinchout', _.bind(function(event){
        var scale = event.gesture.scale;
        this.map.setZoom(Math.min(1, Math.floor(this.map.getZoom() / scale)));      
      }, this));

      function convertMouseEvents(newEventType, originalEventType){
        $('#interceptor')[0].addEventListener(originalEventType, function(event) {
          var touches = event.changedTouches,
            location = _.first(touches);

          var simulatedEvent = document.createEvent("MouseEvent");
          simulatedEvent.initMouseEvent(newEventType, true, true, window, 1,
            location.screenX, location.screenY,
            location.clientX, location.clientY, false,
            false, false, false, 0/*left*/, null);

          event.target.dispatchEvent(simulatedEvent);
          event.preventDefault();
        });
      }
      _.each({touchstart:'mousedown', touchend:'mouseup'}, _.bind(convertMouseEvents, this));
    },

    initMap: function() {
      var mapOptions = {
        center: new google.maps.LatLng(-34.397, 150.644),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.SATELLITE,
        panControl: false,
        zoomControl: false,
        scaleControl: false
      };

      this.map = new google.maps.Map(this.$el.find('#map-canvas')[0], mapOptions);

      this.map.setTilt(45);
    },


    render: function() {

      var template =  _.template(MapTemplate);
      this.$el.html(template);

      return this;
    },