Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>SOLVED! Thank you Dimitar &amp; jerone.</p> <p>This maybe helps anyone in future. Final working code is like this:</p> <pre><code>var CircleOverlay = function(map, center, radius, options) { this.options = { numPoints: 50, drawOptions: { strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35 } }; // Extending with jQuery. So another ways possible this.options = $.extend(this.options, options || {}); google.maps.OverlayView.call(this); var q = 180 / 63781370 / Math.sin(90 - center.lat()) / Math.PI; this._map = map; this._point = center; this._radius = radius * q * 10; // convert meters to latlang degrees // Fit bounds of a circle that is drawn into the map var d2r = Math.PI / 180; this.circleLatLngs = new Array(); var circleLat = this._radius; var circleLng = circleLat / Math.cos(center.lat() * d2r); this.latlngbounds = new google.maps.LatLngBounds(); // 2PI = 360 degrees, +1 so that the end points meet for (var i = 0; i &lt; this.options.numPoints + 1; i++) { var theta = Math.PI * (i / (this.options.numPoints / 2)); var vertexLat = center.lat() + (circleLat * Math.sin(theta)); var vertexLng = parseFloat(center.lng()) + parseFloat((circleLng * Math.cos(theta))); var vertextLatLng = new google.maps.LatLng(vertexLat, vertexLng); this.circleLatLngs.push(vertextLatLng); this.latlngbounds.extend(vertextLatLng); } map.fitBounds(this.latlngbounds); this.setMap(map); this.onAdd = function() { var polyOptions = this.options.drawOptions; polyOptions.paths = this.circleLatLngs; this.polygon = new google.maps.Polygon(polyOptions); this.polygon.setMap(this.map); }; this.onRemove = function() { this.polygon.setMap(null); }; this.draw = function() { this.onRemove(); this.onAdd(); }; }; </code></pre> <p>Finally</p> <pre><code>CircleOverlay.prototype = google.maps.OverlayView.prototype; </code></pre>
    singulars
    1. This table or related slice is empty.
    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. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    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