Drawing Library Example - Google Maps API

by Camille Bechayda

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=drawing&amp;extension=.js"></script>
<div id="map"></div>

<div id="marker-position"></div>

CSS

#map {
    height: 420px;
    width:600px;
}

JavaScript

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'),
mapOptions);

 

var drawingManager = new google.maps.drawing.DrawingManager({
    drawingControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_LEFT,
        drawingModes: [
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.RECTANGLE,
        google.maps.drawing.OverlayType.POLYGON]
    }
           
});

google.maps.event.addListener(drawingManager, 'markercomplete', function (marker) {
    var position = marker.getPosition().toUrlValue(2);
    $('#marker-position').append(position + '<br>');
});


google.maps.event.addListener(drawingManager, 'circlecomplete', function (circle) {
    var position = circle.getCenter();
    var rad = circle.getRadius();
    $('#marker-position').append('Centre => '+position +'<br>Radius =>' + rad+'<br>');
});

google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
    var position = polygon.getPath();
    $('#marker-position').append('Polygon => '+position.getArray());
});

google.maps.event.addListener(drawingManager, 'polylinecomplete', function (polyline) {
    var position = polyline.getPath();
    $('#marker-position').append('polyline => '+position.getArray());
});

google.maps.event.addListener(drawingManager, 'rectanglecomplete', function (rectangle) {
    var position = rectangle.getBounds();
    $('#marker-position').append('rectangle => '+position);
});

drawingManager.setMap(map);