Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>That functionality is built in to the <a href="https://developers.google.com/maps/documentation/javascript/examples/drawing-tools" rel="noreferrer">Google Maps API v3 Drawing Library</a></p> <p><a href="https://google-developers.appspot.com/maps/documentation/javascript/examples/full/drawing-tools" rel="noreferrer">Example</a></p> <p>You can customize it to just allow circles (or just allow one circle).</p> <p><a href="http://www.geocodezip.com/v3_GoogleEx_drawing-tools_Circle.html" rel="noreferrer">Working example</a></p> <p><strong>code snippet:</strong></p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>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);</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>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; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"&gt;&lt;/script&gt; &lt;div id="map-canvas"&gt;&lt;/div&gt;</code></pre> </div> </div> </p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload