How To Trigger The *start* Of A Google Maps 'DrawingManager' Drawing?
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 = false
var already = false
var event
$('#map').click(function (e) {
if (draw === true && already === false) {
already = true;
click(event.clientX, event.clientY);
draw = false;
} else if (draw === false) {
event = e;
already = false;
}
draw = false
})
function click (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>
<style type="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>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script>
</head>
<body>
<div id="map-container"></div>
<script type="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?"