Google Maps shapes - How to prevent overlapping

Question

I'm trying to implement a map that let users draw some shapes (circles, rectangles and polygons) over it and that part is working right now.

The problem is that users can draw a shape over another (overlapping) and the system shouldn't allow that. The same geographic area should not be covered by multiple shapes... when a user tries to do that they should be notified with a warning/info message.

I've searched a lot and I've not found a working example anywhere or a clue of how to do that.

Can you guys give any help - is it even possible to do?

Thanks!

Answer 1

As you may know already from https://developers.google.com/maps/documentation/javascript/drawing#drawing_events, there are callbacks drawing events.

When drawing is complete, you need to figure out the new shape is colliding to the existing shapes, which are saved.

    google.maps.event.addListener(
        drawingManager, 
        'overlaycomplete',   
        function(event) {
            // calculate event.overlay is overlapped to another, which is saved. 
            // This part is difficult
            var overlapped = true
            if (overlapped) {
                event.overlay.setMap(null);
                delete event.overlay;
            } else {
                ZONES.overlays.push(event.overlay); // assuming ZONE.overlays are defined
            }
        }
    );

Can't tell you all about collision detection. You can google it though, "2D collision detection". It's all about math.