CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Charles
Charles

Reputation: 11796

Gmaps mousemove over Circle, Polygon or Rectangle

I want to draw a circle by clickin on the google maps (to set the center) and moving over the map (to set the radius).

It works when I make the circle bigger but not when I make the circle smaller.

The problem is that mousemove event don't pass through the circle so the map don't fire any mousemouse when the mouse is over the circle...

Here is the fiddle: http://jsfiddle.net/charlesbourasseau/m2Cjc/4/

I also try to used mousemove on the circle without any success.

Here is the code:

var map = new GMaps({
  div: '#map',
  lat: 52.521832,
  lng: 13.413168,
  click: function(e) {
    var lat = e.latLng.lat();
    var lng = e.latLng.lng();

    if (circle) {
      // TODO how to really remove the circle?
      circle.setVisible(false);
    }

    circle = map.drawCircle({
      lat: lat,
      lng: lng,
      radius: 100,
      strokeColor: '#BBD8E9',
      strokeOpacity: 1,
      strokeWeight: 3,
      fillColor: 'transparent'
    });
  },
  mousemove: function(e) {
    if (!circle) {
      return ;
    }

    var distance = calculateDistance(circle.getCenter().lat(), circle.getCenter().lng(), e.latLng.lat(), e.latLng.lng());
    circle.setRadius(distance);
  }
});

Upvotes: 3

Views: 2457

Answers (2)

AlfaTeK
AlfaTeK

Reputation: 7775

Your problem is that your circle has a transparent fill but the mousemove event is still being captured by the circle fill and doesn't get propagated to the map. That's why the mousemove event on the map doesn't get triggered.

The simple solution is just to make the circle unclickable so that it doesn't capture mouse events:

var map = new GMaps({
  div: '#map',
  lat: 52.521832,
  lng: 13.413168,
  click: function(e) {
    var lat = e.latLng.lat();
    var lng = e.latLng.lng();

    if (circle) {
      // TODO how to really remove the circle?
      circle.setVisible(false);
    }

    circle = map.drawCircle({
      lat: lat,
      lng: lng,
      radius: 100,
      strokeColor: '#BBD8E9',
      strokeOpacity: 1,
      strokeWeight: 3,
      fillColor: 'transparent',
      clickable: false
    });
  },
  mousemove: function(e) {
    if (!circle) {
      return ;
    }

    var distance = calculateDistance(circle.getCenter().lat(), circle.getCenter().lng(), e.latLng.lat(), e.latLng.lng());
    circle.setRadius(distance);
  }
});

Example: http://jsfiddle.net/pjfs/PRX7y/

I also tried adding a mousemove event to the circle and then triggering the mousemove map event manually with no luck.

Upvotes: 4

ezekielDFM
ezekielDFM

Reputation: 1977

Seems to work if you just add the same mouse move handler to the circle as well. Check out this updated fiddle: http://jsfiddle.net/m2Cjc/7/

circle = map.drawCircle({
        lat: lat,
        lng: lng,
        radius: 100,
        strokeColor: '#BBD8E9',
        strokeOpacity: 1,
        strokeWeight: 3,
        fillColor: 'transparent',
        mousemove: function(e) {
        var distance = calculateDistance(circle.getCenter().lat(), circle.getCenter().lng(), e.latLng.lat(), e.latLng.lng());
        circle.setRadius(distance);
        }
      }

Upvotes: 3

Related Questions