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: /

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

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

• javascript
• google-maps
• google-maps-api-3

Share Improve this question Follow asked Jun 12, 2013 at 16:00 CharlesCharles 11.8k1010 gold badges8181 silver badges122122 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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/pjfs/PRX7y/

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

Seems to work if you just add the same mouse move handler to the circle as well. Check out this updated fiddle: http://jsfiddle/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);
        }
      }