Converting a class from Mootools to jQuery or classic javascript

Question

Following Mootools class helps developer to draw a circle overlay on Google Map using Google Maps API v3. I'm using jQuery in my projects and entry-level knowledge in Object-oriented javascript.

In Google Maps API v2, this is very easy but API v3 currently haven't built-in methods for drawing circles on map. Plus, in API documentation, there are some description for this can be done with different way.

I want to use following CircleOverlay method in my project with jQuery or classic Javascript.

Can anyone help for convert following Mootools lines to jQuery-enabled or classic javascript approach?

var CircleOverlay = new Class({
 Implements: [Options],
 options: {
  numPoints: 100,
  drawOptions: {
   strokeColor: "#FF0000",
   strokeOpacity: 0.8,
   strokeWeight: 2,
   fillColor: "#FF0000",
   fillOpacity: 0.35
  }
 },

 initialize: function(map, center, radius, options) {
  this.setOptions(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 < 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);
 },

 onAdd: function() {
  var polyOptions = this.options.drawOptions;
  polyOptions.paths = this.circleLatLngs;
  this.polygon = new google.maps.Polygon(polyOptions);
  this.polygon.setMap(this.map);
 },

 onRemove: function() {
  this.polygon.setMap(null);
 },

 draw: function() {
  this.onRemove();
  this.onAdd();
 }
});
CircleOverlay.implement(new google.maps.OverlayView());

Answer 1

I just did something similar like that last weekend.

Haven't tested it, but...

var CircleOverlay = funtion(map, center, radius, options) {
    this.options = {
        // all options here, 
        // including an custom check to override the options, e.g.:
        numPoints: options.numPoints || 100,
        // etc...
    };

    // everything from initialize here;

    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();
    };
};

Answer 2

SOLVED! Thank you Dimitar & jerone.

This maybe helps anyone in future. Final working code is like this:

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 < 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();
    };
}; 

Finally

CircleOverlay.prototype = google.maps.OverlayView.prototype;