0

I'm building an hybrid app that requires a google map and since I'm working with angular it's easier for me to use ng-map.

I'm having some problems with the on-click event of the marker 

<marker position="{{m.center}}" ng-repeat="m in markers" on-click="selectRequest(m)" icon="images/marker-{{m.status}}.png"></marker>

It works fine on desktop with the mouse but not with touch events on mobile phone.

Why ?

Matteo Cardellini
  • 876
  • 2
  • 17
  • 41

2 Answers2

0

Thanks to SSH comments above I accomplished this:

$scope.requests.forEach(function(elem) {
                var marker = new google.maps.Marker({
                    map: map,
                    position: new google.maps.LatLng(elem.latitude, elem.longitude),
                    icon: "images/marker-"+elem.status+".png",
                });

                google.maps.event.addListener(marker, "mousedown", function() {
                    $scope.selectedRequest = elem;
                    $scope.$apply();
                });
            });
Matteo Cardellini
  • 876
  • 2
  • 17
  • 41
0

You may find a problem using mouse down, because it'll fire on other actions that you don't want. You can do this: (Need to inject $interval on your controller)

var ctrl = this;

var count = 1;

var clock;

ctrl.map;

var lat = -23.56;

var long = -46.65;

// Start Hold To Mark Controller
var startCount = function(event){
  count = 1;
  if ( angular.isDefined(clock) ) return;
  clock = $interval(function() {
    if(count > 0){
      count = count - 1;
    } else{
      addMarker(event.latLng);
      stopCount();
    }
  }, 500);
};

var stopCount = function(){
  if (angular.isDefined(clock)) {
    $interval.cancel(clock);
    clock = undefined;
  }
};

$scope.$on('$destroy', function() {
  stopCount();
});
// End Hold To Mark Controller

// Start GoogleMaps Map Controller
function initMap() {
  if(lat == null || long == null){
    var center = { lat: -23.56, lng: -46.65 };
  } else{
    var center = { lat: lat, lng: long };
  }

  ctrl.map = new google.maps.Map(document.getElementById('map'), {
    disableDefaultUI: true,
    zoom: 12,
    center: center
  });

  google.maps.event.addListener(ctrl.map, 'mousedown', function(event) {
    startCount(event);
  });

  google.maps.event.addListener(ctrl.map, 'mouseup', function(event) {
    stopCount();
  });

  google.maps.event.addListener(ctrl.map, 'dragstart', function(event) {
    stopCount();
  });
};

function addMarker(location) {
  var marker = new google.maps.Marker({
    animation: google.maps.Animation.DROP,
    draggable: true,
    position: location,
    map: ctrl.map
  });
  markers.push(marker);
};

initMap();
// End GoogleMaps Map Controller

This way you'll put a mark on the place before 1 second, if you remove your finger or move it, the marker will not be created.

MarioAleo
  • 424
  • 4
  • 8