Skip to content Skip to sidebar Skip to footer
Home / Eventtrigger / Google Maps / Google Maps Api 3 / Javascript

How To Trigger The *start* Of A Google Maps 'drawingmanager' Drawing?

Post a Comment
In my Google Maps based application, users often have to draw a pair of concentric circles on the map. I'm using the google.maps.drawing.DrawingManager for this. In the ideal scena

Solution 1:

I've finally got it work ! Like TravJenkins says, all the events are disabled while in drawing mode, I've try to play around with the Google API but can't find a way to do it. I seriously thinks that the Drawing Library can be greatly improved..

I've decided to emulate a click event, saving the coordinates of the previous click.

All I have to do is to affect two variables to detect while a circle is drawing and another to stop at the second to prevent infinite drawing.

Here is the code:

var draw = falsevar already = falsevar event

$('#map').click(function (e) {
  if (draw === true && already === false) {
    already = true;
    click(event.clientX, event.clientY);
    draw = false;
  } elseif (draw === false) {
    event = e;
    already = false;
  }
  draw = false
})

functionclick (x, y) {
  var ev = document.createEvent('MouseEvent')
  var el = document.elementFromPoint(x, y)
  ev.initMouseEvent(
    'click', true, true, window, null, 0, 0,
    x, y,
    false, false, false, false, 0, null
  )
  el.dispatchEvent(ev)
}

google.maps.event.addDomListener(manager, 'circlecomplete', function (circle) {
  draw = true
})

Solution 2:

Hopefully the google.maps team will add some methods to permit the developer draw some overlays from code or at least to attach new overlays to the DrawingManager, but currently is not the case.

I suggest you to use a different approach I demostrate in the following exemple:

<!DOCTYPE html><html><head><title>Handling markers collection demo</title><styletype="text/css">html
        {
            height: 100%;
        }
        body
        {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map-container
        {
            height: 100%;
            width: 100%;
            min-width:500px;
            min-height:300px;
        }
    </style><scriptsrc="http://code.jquery.com/jquery-1.10.1.min.js"></script><scriptsrc="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script><scripttype="text/javascript"src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script></head><body><divid="map-container"></div><scripttype="text/javascript">var _map,
            manager;

        $(document).ready(function () {
            var mapOptions = {
                zoom: 4,
                center: new google.maps.LatLng(-34.397, 150.644),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            _map = new google.maps.Map($("#map-container")[0], mapOptions);

            manager = new google.maps.drawing.DrawingManager({
                map: _map,
                drawingControlOptions: {
                    drawingModes: [google.maps.drawing.OverlayType.CIRCLE]
                }
            });

            google.maps.event.addListener(manager, 'circlecomplete', function (circle) {

                var center = circle.getCenter(), radius = circle.getRadius();

                manager.setDrawingMode(null);
                var circleOptions = {
                        center: center,
                        editable: true,
                        map: _map,
                        radius: radius * 0.80,
                        visible: true
                    },
                    newCircle = new google.maps.Circle(circleOptions);

                google.maps.event.addListener(newCircle, 'center_changed', function () {
                    var oldCenter = center,
                        newCenter = newCircle.getCenter();

                    if (oldCenter.lat() != newCenter.lat() && oldCenter.lng() != newCenter.lng()) {
                        newCircle.setCenter(center);
                    }
                });

                google.maps.event.addListener(newCircle, 'radius_changed', function () {
                    newCircle.setEditable(false);
                });

            });
        });
    </script></body></html>

This code is available and running in this jsFiddle

Post a Comment for "How To Trigger The *start* Of A Google Maps 'drawingmanager' Drawing?"