Google Maps: Dynamically Movable and Resizable Circle Overlay Script for v3 - google-maps

Question

Ok, I just found the perfect script I was looking for.
http://web3o.blogspot.com.br/2010/05/google-maps-dynamically-movable-and.html
You can add circles with lat/long and radius on Google Maps.
The problem is that this script it's only for v2 api.
I found this one too
http://www.mapdevelopers.com/draw-circle-tool.php
But there's no code or source available on it :(
Does anybody know any script like these that could work on v3?
Thank you

Answer 1

That functionality is built in to the Google Maps API v3 Drawing Library
Example
You can customize it to just allow circles (or just allow one circle).
Working example
code snippet:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.CIRCLE,
drawingControl: false,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.CIRCLE
]
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
// Switch back to non-drawing mode after drawing a shape.
drawingManager.setDrawingMode(null);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas,
#map_canvas {
height: 100%;
}
#media print {
html,
body {
height: auto;
}
#map-canvas,
#map_canvas {
height: 650px;
}
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>

Answer 2

function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.CIRCLE,
drawingControl: false,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.CIRCLE
]
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
// Switch back to non-drawing mode after drawing a shape.
drawingManager.setDrawingMode(null);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas,
#map_canvas {
height: 100%;
}
#media print {
html,
body {
height: auto;
}
#map-canvas,
#map_canvas {
height: 650px;
}
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<div id="map-canvas"></div>