Question

Anyone know how I can draw Polygons with GPolygon from Google Map without having a map, inside other elements? Or anyone know any framework to do it with the same features like GPolygon?

I would like to have this “draw polygon” on a custom element, like div:

<div id="MyArea"></div>

Answer 1

Check out Raphael, a javascript library that wraps around VML in IE and SVG in standards compliant browsers. It’s fairly easy to use and quite well documented.

Granted, the path element (used to draw polygon and polylines) uses the SVG path string syntax which is a bit cryptic but quite easy to understand. You can of course extend Raphael to use a more simple syntax:

Raphael.fn.polygon = function () { // supply x,y coordinates as arguments
    var self = this.path();
    self.coords = [];
    for (var i=0;i<arguments.length;i++) self.coords.push(arguments[i]);

    self.update = function () {
        var pathlist = [];
        // the M command moves the cursor:
        pathlist.push('M'+self.coords[0]+' '+self.coords[1]);
        // the L command draws a line:
        pathlist.push('L');
        // Now push the remaining coordinates:
        for (var i=2;i<self.coords.length;i++) {
            pathlist.push(self.coords[i]);
        }
        // the Z command closes the path:
        pathlist.push('Z');
        self.attr('path',pathlist.join(' '));
    }
    self.update();
    return self;
}

Which should allow you to do:

<div id="MyArea"></div>
<script>
    var paper = Raphael("MyArea",640,480);
    var mypolygon = paper.polygon(
      10, 10,
      20, 20,
      10, 30
    );

    // you can even modify it after creation:
    mypolygon.coords.push(15,20);
    mypolygon.update();
</script>

Or create your own polygon API to taste if you don’t like mine.

EDIT: fixed some small bugs.