CODEWITHSUNDEEP
google-maps-api-3
Catalin
Catalin

Reputation: 11721

Google Maps Polygon resize event

I have an editable Polygon, just like here.

I want to "catch" the event when a user is moving the dot around the map (to resize the polygon). I need this functionality to implement snap to point.

Is it possible?

Edit

this.polygon = new google.maps.Polygon({
    map: map,
    strokeWeight: 2,
    editable: true,
    path: this._path
});

var dragging = false;
google.maps.event.addListener(this.polygon, 'mousedown', function (event) {
    if (event.vertex) {
        dragging = true;
    }
});
google.maps.event.addListener(this.polygon, 'mousemove', function (event) {
    if (dragging) {
        // dragging
    }
});
google.maps.event.addListener(this.polygon, 'mouseup', function (event) {
    dragging = false;
});

The code is working, events are catched. However, i can't access the current dragged point to change it's position.

I also tryied inside mousemove event to change the latLng object, but with no effect

Temporary Solution

You can't access the Polygon ghost while is resizing, so the only solution to implement the snapping is to do it after the polygon has been resized.

this.polygon = new google.maps.Polygon({
    map: map,
    strokeWeight: 2,
    editable: true,
    path: this._path
});

var path = this.polygon.getPath();
google.maps.event.addListener(path, 'set_at', function (event) {
    // Here do the snapping, after the polygon has been resized
});

google.maps.event.addListener(path, 'insert_at', function (event) {
    // Here do the snapping, after the polygon has been resized
});

Upvotes: 3

Views: 6611

Answers (5)

Lorenzo Fiamingo
Lorenzo Fiamingo

Reputation: 4069

I think the right answer is this:

path.addListener('bounds_changed', function (event) {
    // Here do the snapping, after the polygon has been resized
});

A complete example is here: Google Doc example

Upvotes: 0

Erica Tripp
Erica Tripp

Reputation: 326

Expanding on the answer from @SeainMalkin with code:

var draggingPolygonVertex = false;

google.maps.event.addListener(polygon, 'mousedown', function(mdEvent) {
    if(mdEvent.vertex || (mdEvent.vertex == 0)){
        draggingPolygonVertex = true;
    }
});

google.maps.event.addListener(polygon, 'mouseup', function(muEvent) {
        draggingPolygonVertex = false;
});


google.maps.event.addListener(polygon, 'mousemove', function(mmEvent) {
    if(draggingPolygonVertex){
        // you're now dragging a vertex of the polygon
        // insert snap to grid code
    }
});

Upvotes: 1

m1k4
m1k4

Reputation: 11

I've solved a similar problem putting together the solution Seain Malkin suggested and the solution suggested here (thanks to both).

Instead of registering a "google event listener" for mousemove to polygon I've registered a DOM event listener to the maps div (useCapture parameter set to true, especially to work with Firefox):

map.getDiv().addEventListener('mousemove', function (e) {
    if (drawing) {
        var latLng = getLatLngByOffset( map, e.clientX, e.clientY );
        // dragging
    }
}, true);

Upvotes: 1

Andrew Kirkegaard
Andrew Kirkegaard

Reputation: 1684

Actually, the arguments passed to the set_at event handler are (index, object). The index will correspond to the vertex modified.

Upvotes: 1

Seain Malkin
Seain Malkin

Reputation: 2303

Yes it's possible but not straight forward.

You would need to use a combination of events on the polygon object.

A PolygonMouseEvent object has three properties, edge, path and vertex. If the event occured over a vertex you will get the index of it otherwise it is undefined.

So if you try the following you may be able to build the functionality you want:

  • Listen for the mousedown event. If vertex is defined, then dragging = true.
  • Listen for the mouseup event. Set dragging = false
  • Listen for the mousemove event. If dragging = true then get the mouse position. e.latLng and do your logic to snap it.

I haven't tried this, but with some tinkering you should get it working using this method.

If mousemove doesn't work try using mouseover.

If you give it a go and can't get it working, post your code so we can help.

Upvotes: 1

Related Questions